CSS FontAwesome with PrimeFaces

FontAwesome with PrimeFaces

提问by Forjap

I was longing for the inclusion of FontAwesome icons inside Primefaces, and finally Optimus posted yesterday this great new. --> http://blog.primefaces.org/?p=3004#comment-5422

我渴望在 Primefaces 中包含 FontAwesome 图标，最后 Optimus 昨天发布了这个很棒的新图标。--> http://blog.primefaces.org/?p=3004#comment-5422

Integrated by Max Dicson We now should be able to use them.

由 Max Dicson 集成 我们现在应该可以使用它们了。

However following at the tutorial video I'm not able to work it out.

但是，在教程视频之后，我无法解决。

• Using PF4.0 but JSF 2.1 (the only diff from the video)
• Added the last maven-FontAwesome.jar --> http://mvnrepository.com/artifact/org.webjars/font-awesome/4.0.3

• Added the mime-types in the web.xml file

• Calling the relevant css file with <h:outputStylesheet name="webjars/font-awesome/4.0.3/css/font-awesome.css">

• 使用 PF4.0 但 JSF 2.1 （与视频的唯一区别）
• 添加了最后一个 maven-FontAwesome.jar --> http://mvnrepository.com/artifact/org.webjars/font-awesome/4.0.3

• 在 web.xml 文件中添加了 mime-types

• 调用相关的 css 文件 <h:outputStylesheet name="webjars/font-awesome/4.0.3/css/font-awesome.css">

But not being able to get my desired fa-bug.

但无法获得我想要的 fa-bug。

Any idea? Thanks!

任何的想法？谢谢！

回答by Kirill K

it seems this has already been closed, however just in case someone runs into this issues of "^" instead of the desired icons. Not just wants to hid the "^", but rather have the actual images showing, as this what I understood the initial issue was.

似乎这已经关闭了，但是以防万一有人遇到“^”而不是所需图标的问题。不仅要隐藏“^”，还要显示实际图像，因为这就是我理解的最初问题。

When something like this comes up [1]: http://i.stack.imgur.com/5GpHZ.jpg

当这样的事情出现时 [1]：http: //i.stack.imgur.com/5GpHZ.jpg

Using latest PrimeFaces JAR which supports FontAwesome out of the box, making sure the bellow is correct, might help

使用开箱即用支持 FontAwesome 的最新 PrimeFaces JAR，确保波纹管正确，可能会有所帮助

1. In your web.xml add:

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

2. In your *.xhtml where you would like to add FontAwesome icons, in between head tags point to the font-awesome css of the JAR that you have:

   <h:outputStylesheet name="webjars/font-awesome/4.4.0/css/font-awesome.css">
   

3. Finally reference icons correctly e.g.

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

1. 在你的 web.xml 添加：

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

2. 在您想要添加 FontAwesome 图标的 *.xhtml 中，在 head 标记之间指向您拥有的 JAR 的 font-awesome css：

   <h:outputStylesheet name="webjars/font-awesome/4.4.0/css/font-awesome.css">
   

3. 最后正确引用图标，例如

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

This helped me.

这对我有帮助。

Cheers

干杯

回答by crimp

The ^ can be removed with

^ 可以删除

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

回答by crimp

For the ^problem, you could add following CSS-Style:

对于这个^问题，您可以添加以下 CSS 样式：

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

This overrides the primefaces .ui-icon style {text-indent:-99999px}.....

这将覆盖素面.ui-icon style {text-indent:-99999px}.....

In my case, then the icon looked broken. I had an 404 error in the firebug console (NetworkError for woff or ttf). For me the following link was the solution: Prevent suffix from being added to resources when page loads

就我而言，图标看起来坏了。我在萤火虫控制台中有一个 404 错误（woff 或 ttf 的网络错误）。对我来说，以下链接是解决方案：防止页面加载时将后缀添加到资源中

回答by Yuanqi Cao

http://www.primefaces.org/showcase/ui/misc/fa.xhtmlcheck the official demo, and you can find the document saying you should add some , so follow the instruction.

http://www.primefaces.org/showcase/ui/misc/fa.xhtml查看官方demo，可以找到文档说应该添加一些，所以按照说明操作。