如何在 Primefaces DataTable 中使用 Font Awesome(或其他字体图标)而不是 jQuery 精灵? [英] How can I use Font Awesome (or other font icons) instead of the jQuery sprites in Primefaces DataTable?
问题描述
我正在使用 PrimeFaces 生成数据表.默认的排序图标是来自 JQuery 库的 V 形符号，但由于它们不是 Vector，因此它们看起来很难看.我不想使用像 font awesome 这样的字体来替换它们，但我不知道如何做到这一点.我可以使用以下 CSS 句柄将图像更改为不同的精灵等.
如果我能以某种方式将类 primefaces 添加从 ui-icon-triangle-1-n 更改为 af fa-sort-alpha-desc 例如我已经得到帮助.
.ui-state-default .ui-icon{背景图片:url("../Assets/images/jquery-ui/ui-icons_0072b6_256x240.png");}.ui-datatable .ui-icon-carat-2-n-s {背景位置:-160px 0 !important;}.ui-datatable .ui-icon-triangle-1-n{背景位置:0 -48px ！重要；}.ui-datatable .ui-icon-triangle-1-s{背景位置:-64px -48px ！重要；}我最终为 DataTable 编写了一点 CSS:
.ui-datatable .ui-sortable-column-icon.ui-icon {背景图像:无；文本缩进:0；边距:0 0 0 .5em；}.ui-分页器>跨度:之前，.ui-sortable-column-icon:之前{字体系列:FontAwesome；颜色:#fff;}.ui-分页器>跨度>span, .ui-paginator a span { display: none;}.ui-paginator-first:before { content: 'f049';}.ui-paginator-prev:before { content: 'f048';}.ui-paginator-next:before { content: 'f051';}.ui-paginator-last:before { content: 'f050';}.ui-icon-carat-2-n-s:before { content: 'f0dc';}.ui-icon-carat-2-n-s.ui-icon-triangle-1-n:before { content: 'f0de';}.ui-icon-carat-2-n-s.ui-icon-triangle-1-s:before { content: 'f0dd';}.ui-paginator .ui-state-disabled { 不透明度:.25;}所有的 unicode 都可以在这里找到:http://fontawesome.io/cheatsheet/
Font Awesome 提供了一些替代图标:
- fa-sort-alpha-asc
f15d - fa-sort-alpha-desc
f15e - fa-sort-amount-asc
f160 - fa-sort-amount-desc
f161 - fa-sort-numeric-asc
f162 - fa-sort-numeric-desc
f163
更新
在为我的主题做了一些 CSS 覆盖并考虑了 Kukeltje 的评论后，我决定将 JSF ResourceHandler 添加到 我正在研究的主题.
只需将依赖项添加到您的项目并添加资源处理程序
<应用程序><resource-handler>org.jepsar.primefaces.theme.jepsar.FontAwesomeResourceHandler</resource-handler></应用程序>处理程序将检测 PrimeFaces 主题并修补 CSS.它删除了 jQuery UI 图标并添加了 Font Awesome 规则(其中包括一个单独的 图标映射 SCSS).
I'm using PrimeFaces to generate a datatable. The default sorting icons are chevrons from the JQuery library but as they are not Vector they look ugly. I wan't to replace them using some font like font awesome but I have no clue how to do this. The below CSS handles I can use to change the image to different sprites etc.
If I could somehow change the class primefaces adds from ui-icon-triangle-1-n to af fa-sort-alpha-desc for example I would already be helped.
.ui-state-default .ui-icon{
background-image: url("../Assets/images/jquery-ui/ui- icons_0072b6_256x240.png");
}
.ui-datatable .ui-icon-carat-2-n-s {
background-position: -160px 0 !important;
}
.ui-datatable .ui-icon-triangle-1-n{
background-position: 0 -48px !important;
}
.ui-datatable .ui-icon-triangle-1-s{
background-position: -64px -48px !important;
}
I ended up with this bit of CSS for the DataTable:
.ui-datatable .ui-sortable-column-icon.ui-icon {
background-image: none; text-indent: 0; margin: 0 0 0 .5em;
}
.ui-paginator > span:before, .ui-sortable-column-icon:before {
font-family: FontAwesome; color: #fff;
}
.ui-paginator > span > span, .ui-paginator a span { display: none; }
.ui-paginator-first:before { content: 'f049'; }
.ui-paginator-prev:before { content: 'f048'; }
.ui-paginator-next:before { content: 'f051'; }
.ui-paginator-last:before { content: 'f050'; }
.ui-icon-carat-2-n-s:before { content: 'f0dc'; }
.ui-icon-carat-2-n-s.ui-icon-triangle-1-n:before { content: 'f0de'; }
.ui-icon-carat-2-n-s.ui-icon-triangle-1-s:before { content: 'f0dd'; }
.ui-paginator .ui-state-disabled { opacity: .25; }
All the unicodes can be found here: http://fontawesome.io/cheatsheet/
Font Awesome offers some alternative icons:
- fa-sort-alpha-asc
f15d - fa-sort-alpha-desc
f15e - fa-sort-amount-asc
f160 - fa-sort-amount-desc
f161 - fa-sort-numeric-asc
f162 - fa-sort-numeric-desc
f163
Update
After doing some CSS overriding for my theme and taking Kukeltje's comment into consideration I decided I would be a good idea to add a JSF ResourceHandler to the theme I'm working on.
Simply add the dependency to your project and add the resource handler
<application>
<resource-handler>org.jepsar.primefaces.theme.jepsar.FontAwesomeResourceHandler</resource-handler>
</application>
The handler will detect PrimeFaces themes and will patch the CSS. It removes the jQuery UI icons and adds Font Awesome rules (which includes a separate icon mapping SCSS).
这篇关于如何在 Primefaces DataTable 中使用 Font Awesome(或其他字体图标)而不是 jQuery 精灵?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
