[英]Primefaces customize rowEditor with theme icon
我想使用任何Primefaces主題(如Sentinel)提供的圖標自定義p:rowEditor
圖標(鉛筆等)(請參見此處:[ https://www.primefaces.org/eos/sentinel/font-icons.xhtml] [1]
我編輯了自定義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';
}
沒有機會讓它正常工作。 我看到所有空白。 也許我需要調整任何頭寸屬性? 有什么建議嗎? 謝謝!
最有可能的是, text-indent
屬性是不顯示內容的原因。
components.css
定義:
.ui-icon{
text-indent: -99999px;
}
要覆蓋它,請添加text-indent: 0;
到您的CSS以獲取.ui-icon-pencil
。
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.