我如何使用 Font Awesome（或其他字体图标）而不是 Primefaces DataTable 中的 jQuery 精灵？

Question

我正在使用 PrimeFaces 生成数据表。默认的排序图标是 JQuery 库中的 V 形图标，但由于它们不是 Vector，因此看起来很难看。我不想用 font awesome 之类的字体替换它们，但我不知道该怎么做。我可以使用下面的 CSS 句柄将图像更改为不同的精灵等。

如果我能以某种方式将 class primefaces 添加从 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;
}

Answer 1

这里有一个例子：

.ui-paginator-first.ui-state-default.ui-corner-all:before{
    content: "\f049";
    font-family: FontAwesome;
    color: white;
}

您可以在 font-awesome 网站 http://fortawesome.github.io/Font-Awesome/icon/pencil/

中找到可以为内容而不是 "\f049" 添加的代码

:before 在 css class

后面很重要

Answer 2

我为 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
ﬁ-sort-amount-desc \f161
Ⅲ fa-sort-numeric-asc \f162
Ⅳ fa-sort-numeric-desc \f163

更新

在为我的主题做了一些 CSS 重写并考虑了 Kukeltje 的评论后，我决定将 JSF ResourceHandler 添加到 theme I'm working on.

只需将依赖项添加到您的项目并添加资源处理程序

<application>
    <resource-handler>org.jepsar.primefaces.theme.jepsar.FontAwesomeResourceHandler</resource-handler>
</application>

处理程序将检测 PrimeFaces 主题并将修补 CSS。它删除了 jQuery UI 图标并添加了 Font Awesome rules (which includes a separate icon mapping SCSS).

我如何使用 Font Awesome（或其他字体图标）而不是 Primefaces DataTable 中的 jQuery 精灵？

How can I use Font Awesome (or other font icons) instead of the jQuery sprites in Primefaces DataTable?

jquery

css

jsf-2

primefaces

font-awesome

更新