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

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

Books Read in 2022

My bookshelf Technical - Operating System: Three Easy Pieces. Andrea Arpaci-Dusseau, Remzi Arpaci-Dusseau. - The Effective Engineer. Edmond Lau. - English Grammar in Use. Raymond Murphy - Mythical Man-Month, The: Essays on Software Engineering. Brooks Jr., Frederick P.  - Peopleware: Productive Projects and Teams (3rd edition). Tom DeMarco, Timothy Lister. - A Philosophy of Software Design. John Ousterhout. - Modern Computer Architecture and Organization: Learn x86, ARM, and RISC-V architectures and the design of smartphones, PCs, and cloud servers. Jim Ledin. Thought Provoking - Đúng Việc. Giản Tư Trung. - A Brief History of Time. Stephen Hawking. - Một đời như kẻ tìm đường. Phan Văn Trường. - Một đời thương thuyết. Phan Văn Trường. - Tinh hoa xử thế - Dám bị ghét. Kishimi Ichiro, Koga Fumitake. - Phép màu để vượt lên chính mình. Nhan Húc Quân. - Scouting for Boys: A Handbook for Instruction in Good Citizenship Through Woodcraft. Robert Baden-Powell. - Thay Đổi Cuộc Sống Với Nhân ...
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

Coders are NERDS | Learning English with Podcast

Let's learn three English vocabulary words based on real-life context through a humorous video about the life of software coders, especially at big tech companies when they work from home. Credit to Joma Tech. 🤓
Post a Comment
Read more

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