FontAwesome與PrimeFaces

Question

我渴望將FontAwesome圖標包含在Primefaces中，最后Optimus昨天發布了這個很棒的新功能。 -> http://blog.primefaces.org/?p=3004#comment-5422

由Max Dicson整合我們現在應該能夠使用它們。

然而，在教程視頻后，我無法解決這個問題。

使用PF4.0但JSF 2.1 （視頻中唯一的差異）
添加了最后一個maven-FontAwesome.jar - > http://mvnrepository.com/artifact/org.webjars/font-awesome/4.0.3
在web.xml文件中添加了mime-types
使用<h:outputStylesheet name="webjars/font-awesome/4.0.3/css/font-awesome.css">調用相關的css文件<h:outputStylesheet name="webjars/font-awesome/4.0.3/css/font-awesome.css">

但是無法得到我想要的錯誤。

任何想法？ 謝謝！

Answer 1

似乎已經關閉，但是以防萬一有人遇到“ ^”問題而不是所需的圖標。 我不僅想隱藏“ ^”，而且要顯示實際的圖像，因為這是我最初理解的問題。

當出現這種情況時[1]： http : //i.stack.imgur.com/5GpHZ.jpg

開箱即用使用支持FontAwesome的最新PrimeFaces JAR，確保波紋管正確，可能會有所幫助

在您的web.xml中添加：

 <context-param> <param-name>primefaces.FONT_AWESOME</param-name> <param-value>true</param-value> </context-param>

在您要在其中添加FontAwesome圖標的* .xhtml中，head標簽之間指向您擁有的JAR的字體真棒CSS：
```
 <h:outputStylesheet name="webjars/font-awesome/4.4.0/css/font-awesome.css"> 
```

最后正確引用圖標，例如

 <p:button outcome="add-user-form" value="Add User" icon="fa fa-user-plus"> <f:param name="productId" value="10" /> </p:button>

這對我有幫助。

干杯

Answer 2

^可以用

.ui-icon.fa {
     text-indent:0px;
     background-image:none;
}

Answer 3

對於^問題，您可以添加以下CSS樣式：

.ui-icon.fa {
    text-indent:0px
}

這會覆蓋primefaces .ui-icon style {text-indent:-99999px} .....

就我而言，那個圖標看起來很破碎。 我在Firebug控制台中遇到404錯誤（woff或ttf為NetworkError）。 對我來說，以下鏈接是解決方案：防止在頁面加載時將后綴添加到資源

Answer 4

http://www.primefaces.org/showcase/ui/misc/fa.xhtml查看官方演示，您可以找到說明您應該添加一些內容的文檔，因此請按照說明進行操作。