I would like to change the color of the PF icons.
Is it possible ?
Icons color
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.
if you are using ThemeRoller icons no those icons are GIF images embedded.
PrimeFaces Developer | PrimeFaces Extensions Developer
GitHub Profile: https://github.com/melloware
PrimeFaces Elite 13.0.0 / PF Extensions 13.0.0
PrimeReact 9.6.1
GitHub Profile: https://github.com/melloware
PrimeFaces Elite 13.0.0 / PF Extensions 13.0.0
PrimeReact 9.6.1
-
- Posts: 109
- Joined: 08 Nov 2016, 16:53
I use FontAwesome.
How to find icons for sorting columns of a datatable?
How to find icons for sorting columns of a datatable?
PrimeFaces Developer | PrimeFaces Extensions Developer
GitHub Profile: https://github.com/melloware
PrimeFaces Elite 13.0.0 / PF Extensions 13.0.0
PrimeReact 9.6.1
GitHub Profile: https://github.com/melloware
PrimeFaces Elite 13.0.0 / PF Extensions 13.0.0
PrimeReact 9.6.1
-
- Posts: 109
- Joined: 08 Nov 2016, 16:53
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?
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?
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 Developer | PrimeFaces Extensions Developer
GitHub Profile: https://github.com/melloware
PrimeFaces Elite 13.0.0 / PF Extensions 13.0.0
PrimeReact 9.6.1
GitHub Profile: https://github.com/melloware
PrimeFaces Elite 13.0.0 / PF Extensions 13.0.0
PrimeReact 9.6.1
-
- Posts: 1
- Joined: 03 Jun 2020, 15:43
I want to change color of tick mark and cross icons. i applied the following which gives me green background with black tick. I am trying too apply white color to tick mark.
<i class="pi pi-check-circle" style="font-size: 21px; color: green;"> </i>
<i class="pi pi-check-circle" style="font-size: 21px; color: green;"> </i>
-
- Information
-
Who is online
Users browsing this forum: No registered users and 20 guests