i would like to customize the p:rowEditor
icons (pencil, etc.) with those provided by any Primefaces theme like Sentinel (see here: [https://www.primefaces.org/eos/sentinel/font-icons.xhtml][1])
I edited my custom CSS file and I tried to overwrite row editor classes copying CSS elements used into Sentinel theme CSS file, so the result is the following :
.ui-datatable table tbody tr td .ui-row-editor .ui-icon-pencil
{
background: none !important;
font-family: "fontello";
font-style: normal;
font-weight: normal;
speak: none;
display: inline-block;
text-decoration: inherit;
width: 1em;
margin-right: .2em;
text-align: center;
/* opacity: .8; */
/* For safety - reset parent styles, that can break glyph codes*/
font-variant: normal;
text-transform: none;
/* fix buttons height, for twitter bootstrap */
line-height: 1em;
/* Animation center compensation - margins should be symmetric */
/* remove if not needed */
margin-left: .2em;
}
.ui-datatable table tbody tr td .ui-row-editor .ui-icon-pencil:before {
content: '\e851';
}
No chance to get it working. I see all blank. Maybe do i need to adjust any position attribute? Any suggestion? Thanks!
Most likely, the text-indent
property is the reason for not showing the content.
components.css
defines:
.ui-icon{
text-indent: -99999px;
}
To override it, add text-indent: 0;
to your css for .ui-icon-pencil
.