Icons color

UI Components for JSF
Post Reply
denisduval75
Posts: 90
Joined: 08 Nov 2016, 16:53

03 May 2019, 17:58

I would like to change the color of the PF icons.
Is it possible ?

User avatar
Melloware
Posts: 1152
Joined: 22 Apr 2013, 15:48

03 May 2019, 20:27

If you use PrimeIcons or FontAwesome yes then its just a CSS style "color: red" on your element.

if you are using ThemeRoller icons no those icons are GIF images embedded.
PrimeFaces Extensions Developer
GitHub Profile: https://github.com/melloware
PrimeFaces Elite 7.0.4 / PF Extensions 7.0.1

denisduval75
Posts: 90
Joined: 08 Nov 2016, 16:53

04 May 2019, 09:01

I use FontAwesome.
How to find icons for sorting columns of a datatable?

User avatar
Melloware
Posts: 1152
Joined: 22 Apr 2013, 15:48

04 May 2019, 17:37

Go here: https://fontawesome.com/v4.7.0/icons/

Type in "sort".
PrimeFaces Extensions Developer
GitHub Profile: https://github.com/melloware
PrimeFaces Elite 7.0.4 / PF Extensions 7.0.1

denisduval75
Posts: 90
Joined: 08 Nov 2016, 16:53

04 May 2019, 18:00

For Datatable Sorting I want to use the 3 Awesome icons:

fa-sort: <i class = "fa fa-sort" aria-hidden = "true"> </ i>
fa-sort-asc: <i class = "fa fa-sor-asct" aria-hidden = "true"> </ i>
fa-sort-desc: <i class = "fa fa-sort-desc" aria-hidden = "true"> </ i>

How to replace the default icons of PF?

User avatar
Melloware
Posts: 1152
Joined: 22 Apr 2013, 15:48

04 May 2019, 18:11

Just a guess from looking at the PrimeFaces showcase https://www.primefaces.org/showcase/ui/ ... sort.xhtml but you will have to override this CSS.

Code: Select all

body .ui-datatable thead th .ui-sortable-column-icon.ui-icon-carat-2-n-s:before {
        content: ""; }
    body .ui-datatable thead th .ui-sortable-column-icon.ui-icon-triangle-1-n {
      font-family: 'primeicons';
      speak: none;
      font-style: normal;
      font-weight: normal;
      font-variant: normal;
      text-transform: none;
      line-height: 1;
      display: inline-block;
      -webkit-font-smoothing: antialiased;
      -moz-osx-font-smoothing: grayscale;
      text-indent: 0px !important;
      text-align: center;
      background: none;
      display: inline-block;
      font-size: 1.25em;
      font-size: 1em; }
PrimeFaces Extensions Developer
GitHub Profile: https://github.com/melloware
PrimeFaces Elite 7.0.4 / PF Extensions 7.0.1

kukeltje
Expert Member
Posts: 9342
Joined: 17 Jun 2010, 13:34
Location: Netherlands

07 May 2019, 12:27

Ronald van Kuijk
______________________________
PrimeFaces 6.1, PrimeFaces plus 0.0.2 | JbossWildfly 10.1| Mojarra 2.2.13
Fedora 61, Firefox 'most recent'
Read the forum posting rules
Beginners: https://jsf.zeef.com/bauke.scholtz

Post Reply

Return to “PrimeFaces”

  • Information
  • Who is online

    Users browsing this forum: BlackMaria and 8 guests