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

How to apply Lean - Kanban for your business

This is the topic of Scrum Breakfast meetup this time, speaker: Ms. Phuong Bui - Technical Project Manager of YOOSE Pte. Ltd. http://www.meetup.com/Scrum-Breakfast-Vietnam-Agile-and-Scrum-Meetup/events/230313727/ Lean comes from Lean manufacturing is a method that focuses on elimination of wastes. In other words, this is a set of principles for archiving the quality, speed and customer alignment. The first time I knew about the term "Lean" is  from the book Software Craftsmanship . Sandro recommends if we want to transform our pet projects into a real business, we should get familiar with Lean Startup concepts. In this talk, Ms. Phuong pointed out some major wastes includes information (ex: unclear requirements), processes (ex: waiting), physical environment and people. Knowing what the problems should be the best way to eliminate them. The difference between  Single item flow and Batch processing is the second main point; and it is the Lean's idea. Batch pr...
Post a Comment
Read more

The HelloWorld example of JSF 2.2 with Myfaces

I just did by myself create a very simple app "HelloWorld" of JSF 2.2 with a concrete implementation Myfaces that we can use it later on for our further JSF trying out. I attached the source code link at the end part. Just follow these steps below: 1. Create a Maven project in Eclipse (Kepler) with a simple Java web application archetype "maven-archetype-webapp". Maven should be the best choice for managing the dependencies , so far. JSF is a web framework that is the reason why I chose the mentioned archetype for my example. 2. Import dependencies for JSF implementation - Myfaces (v2.2.10) into file pom.xml . The following code that is easy to find from  http://mvnrepository.com/  with key words "myfaces". <dependency> <groupId>org.apache.myfaces.core</groupId> <artifactId>myfaces-api</artifactId> <version>2.2.10</version> </dependency> <dependency> <groupId>org.apache.myfaces.core<...
Post a Comment
Read more

Think like a Engineering Manager

Off-boarding Members can leave the company for various reasons, and as a manager, it is important to take action. Hoping for the best is not a strategy. In the case of a low-performing member, I can kindly issue an official warning, set clear objectives for improvement, and re-evaluate the results. If there is a conflict between members, I need to be mindful and go beyond the situation to list our expectations with corresponding actions. Finally, if a member has a big chance to grow at another company, I can have an honest discussion with that member about the trade-offs. Balance at Work As an engineering manager, it is important to balance involvement in meetings and getting your hands dirty on some topics. The goal is to become a companion to teams. Here are my two actions to deal with the situation: Dedicate time for important-but-not-urgent tasks and prioritize them daily. Categorize work into four lines including management, project support, OKRs, and self-study. Management Conduc...
Post a Comment
Read more

Separate Constructing a System from Using It

I n the real world, in order to use a building (hotel, supermarket, etc) we need to construct it first. This concern should be applied for software development as well. Step by step, I would like to show you the issue about no separation of constructing and using it and then I'll give you some approaches to overcome this issue. | Note : you can find the  below  demonstrated code here    Take a Look the Following Simple Application Used tools and technologies: Eclipse (Mars), JDK 1.8 I had an App which uses Controller . Controller uses Service (an interface). Finally, Service has one concrete class is DefaultService . //package vn.nvanhuong.system.separationconstructing; public class App { public static void main(String[] args) { Controller controller = new Controller(); controller.doAction(); } } public class Controller { private Service service; public void doAction(){ System.out.println("doAction in Controller"); getService().execut...
Post a Comment
Read more

Applying pipeline “tensorflow_embedding” of Rasa NLU

According to this nice article , there was a new pipeline released using a different approach from the standard one ( spacy_sklearn ). I wanted to give it a try to see whether it can help with improving bot’s accuracy. After applying done, I gave an evaluation of “tensorflow_embedding”. It seemed to work better a bit. For example, I defined intents “greet” and “goodbye” with some following messages in my training data. ## intent:greet - Hey! How are you? - Hi! How can I help you? - Good to see you! - Nice to see you! - Hi - Hello - Hi there ## intent:goodbye - Bye - Bye Bye - See you later - Take care - Peace In order to play around with Rasa NLU, I created a project here . You can have a look at this change from this pull request . Yay! When I entered message “hi bot”, then bot with “tensorflow_embedding” could detect intent “greet” with better confidence scores rather than bot with “spacy_sklearn”. The following are responses after executing curl -X POST loc...
Post a Comment
Read more