如何在Primefaces DataTable中使用Font Awesome(或其他字体图标)代替jQuery Sprite? [英] 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手柄将图像更改为不同的精灵等.

如果我能以某种方式将类素数从 ui-icon-triangle-1-n 更改为 af fa-sort-alpha-desc ，例如，我已经得到帮助.

.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;
}

解决方案

最后，我得到了DataTable的CSS代码:

.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; }

所有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添加到

解决方案

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 Sprite?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！