Skip to main content

Styling Sort Icons Using Font Awesome for Primefaces' Data Table

So far, Primefaces has used image sprites for displaying the sort icons. This leads to a problem if we want to make a different style for these icons; for example, I would make the icon "arrow up" more blurry at the first time the table loading because I want to highlight the icon "arrow down". I found a way that I can replace these icons with Font Awesome icons.


We will use "CSS Pseudo-classes" to achieve it. The hardest thing here is that we should handle displaying icons in different cases. There is a case both "arrow up" and "arrow down" showing and other case is only one of these icons is shown.

.ui-sortable-column-icon.ui-icon.ui-icon-carat-2-n-s {
    background-image: none;
    margin-left: 5px;
    font-size: 1.1666em;
    position: relative;
}

.ui-sortable-column-icon.ui-icon.ui-icon-carat-2-n-s:not(.ui-icon-triangle-1-s)::before {
    content: "\f106";
    font-family: "FontAwesome";
    position: absolute;
    top: -2px;
    color: rgba(0,0,0,0.4);
}

.ui-sortable-column-icon.ui-icon.ui-icon-carat-2-n-s:not(.ui-icon-triangle-1-n)::after {
    content: "\f107";
    font-family: "FontAwesome";
    position: absolute;
    top: 5px;
    color: rgba(0,0,0,1);
}

.ui-sortable-column-icon.ui-icon.ui-icon-carat-2-n-s.ui-icon-triangle-1-n::before {
    color: rgba(0,0,0,1);
}

Hope it useful when you get the same issue. ;)
Labels:

Comments

Post a Comment

Popular posts from this blog

Junit - Test fails on French or German string assertion

In my previous post about building a regex to check a text without special characters but allow German and French . I met a problem that the unit test works fine on my machine using Eclipse, but it was fail when running on Jenkins' build job. Here is my test: @Test public void shouldAllowFrenchAndGermanCharacters(){ String source = "ÄäÖöÜüß áÁàÀâÂéÉèÈêÊîÎçÇ"; assertFalse(SpecialCharactersUtils.isExistSpecialCharater(source)); } Production code: public static boolean isExistNotAllowedCharacters(String source){ Pattern regex = Pattern.compile("^[a-zA-Z_0-9_ÄäÖöÜüß áÁàÀâÂéÉèÈêÊîÎçÇ]*$"); Matcher matcher = regex.matcher(source); return !matcher.matches(); } The result likes the following: Failed tests: SpecialCharactersUtilsTest.shouldAllowFrenchAndGermanCharacters:32 null A guy from stackoverflow.com says: "This is probably due to the default encoding used for your Java source files. The ö in the string literal in the J...
5 comments
Read more

Google I/O 2017 Notes

WOW! How meaningful this below video explains about the name of  "I/O". Sundar Pichai talked a lot of Machine Learning Machine Learning is a very hot trend these days. Google uses it for their products. Google Assistant: Easily booking an online meal by talking with Google Assistant like a staff of partners, for example. Google Home: Hands-free calling. Google Photos: sharing suggestion, shared library, photo books and google lens. Youtube: 360 degree video, live stream. Kotlin became an official programming language for Android https://kotlinlang.org I'm on the way to Kotlin! ^^ Reference: [1]. https://www.youtube.com/watch?v=Y2VF8tmLFHw
Post a Comment
Read more

JSF, Primefaces - Invoking Application Code Even When Validation Failed

A use case I have a form which has requirements as follow: - There are some mandatory fields. - Validation is triggered when changing value on each field. - A button "Next" is enable only when all fields are entered. It turns to disabled if any field is empty. My first approach I defined a variable "isDisableNext" at a backend bean "Controller" for dynamically disabling/enabling the "Next" button by performing event "onValueChange", but, it had a problem: <h:form id="personForm"> <p:outputLabel value="First Name" for="firstName"/> <p:inputText id="firstName" value="#{person.firstName}" required="true"> <p:ajax event="change" listener="#{controller.onValueChange}" update="nextButton"/> </p:inputText> <p:outputLabel value="Last Name" for="lastName"/> <p:i...
Post a Comment
Read more

14 books I have read in 2020

  1. Cha Voi: Dạy con nên người ở thời đại số Author: Trương Nguyện Thành Language: Vietnamese I love the methodology of parenting so-called Cha Voi (elephant father). It is neither very strict nor easy. The parents take themself as an example to lead their children. 2. Release it! Design and Deploy Production-Ready Software Author: Michael T. Nygard Language: English It was fun to read stories about how the author investigate and solve the issues of software running on production. I learned lots of terms and strategies to ensure stable software such as health check, circuit breaker, logging, monitoring, etc, ... 3. Algorithms to Live By: The Computer Science of Human Decisions Author: Brian Christian and Tom Griffiths Language: English When talking about algorithms, people usually think it is something complicated and also for computer science only. However, algorithms are actually steps to solve a problem. Life consists of lots of problems. We can use the power of algorith...
Post a Comment
Read more