如何将PrimeIcons与自定义主题或“无”主题一起使用

Question

我将一个小型应用程序从JSF1.2RF3.3.3迁移到JSF2.1和PF7.0。( 2.1的原因是JavaEAP6.1只支持JBoss 7)

外观不应该改变，所以我没有使用主题(web.xml中的主题为none )。大多数问题都可以通过一些CSS来解决，但是对于p:dataTable，我需要排序图标，而对于theme=none，没有任何排序图标。

有没有一种方法可以在primefaces中使用一些默认的排序图标，而不需要在应用程序中添加一些图标？如果是，我该如何使用它？我用PrimeIcons尝试了一些东西，但没有让它工作。

Answer 1

这些图标是bundled with PrimeFaces，您可以手动加载，如下所示：

<h:outputStylesheet library="primefaces" name="primeicons/primeicons.css" />

这将允许您使用如下图标：

<i class="pi pi-xxx"></i>

但这并不是PrimeFaces组件所使用的。这些组件是基于jQuery UI icons的，所以像ui-icon ui-icon-xxx这样的类。因此，您需要创建一个custom style sheet来管理UI图标。您不需要从头开始，因为您可以在(例如) Nova Light theme中找到所有它们。

在上面链接的主题中，找到所有包含.ui-icon的规则，特别是像这样的规则：

.ui-icon-xxx:before {
  content: "...";
}

(content定义使用PrimeIcons字体中的哪个字形)，然后合并到样式表中。不幸的是，没有可以复制和粘贴的部分，因此这将是一项艰苦的任务。