[英]Primefaces customize rowEditor with theme icon
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] ) 我想使用任何Primefaces主题(如Sentinel)提供的图标自定义
p:rowEditor
图标(铅笔等)(请参见此处:[ 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 : 我编辑了自定义CSS文件,并尝试覆盖行编辑器类,将复制的CSS元素复制到Sentinel主题CSS文件中,因此结果如下:
.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. 最有可能的是,
text-indent
属性是不显示内容的原因。
components.css
defines: components.css
定义:
.ui-icon{
text-indent: -99999px;
}
To override it, add text-indent: 0;
要覆盖它,请添加
text-indent: 0;
to your css for .ui-icon-pencil
. 到您的CSS以获取
.ui-icon-pencil
。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.