Page 1 of 1

Icons color

Posted: 03 May 2019, 17:58
by denisduval75
I would like to change the color of the PF icons.
Is it possible ?

Re: Icons color

Posted: 03 May 2019, 20:27
by Melloware
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.

Re: Icons color

Posted: 04 May 2019, 09:01
by denisduval75
I use FontAwesome.
How to find icons for sorting columns of a datatable?

Re: Icons color

Posted: 04 May 2019, 17:37
by Melloware
Go here: https://fontawesome.com/v4.7.0/icons/

Type in "sort".

Re: Icons color

Posted: 04 May 2019, 18:00
by denisduval75
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?

Re: Icons color

Posted: 04 May 2019, 18:11
by Melloware
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; }

Re: Icons color

Posted: 07 May 2019, 12:27
by kukeltje