FontAwesome con PrimeFaces

Question

Yo estaba esperando la inclusión de iconos FontAwesome dentro de Primefaces, y finalmente Optimus publicado ayer este gran nuevo.--> http://blog.primefaces.org/?p=3004#comment-5422

Integrada por Max Dicson que ahora debería ser capaz de utilizarlas.

Sin embargo, después de que en el video tutorial que yo no soy capaz de resolverlo.

• El uso de PF4.0 pero JSF 2.1 (la única diferencia con el video)
• Añadido el último maven-FontAwesome.jar --> http://mvnrepository.com/artifact/org.webjars/font-awesome/4.0.3

• Agrega los tipos mime en el web.xml archivo

• Llamar al correspondiente archivo css con <h:outputStylesheet name="webjars/font-awesome/4.0.3/css/font-awesome.css">

Pero no ser capaz de conseguir mi deseado fa-error.

Alguna idea?Gracias!

Answer 1

el ^ se puede eliminar con

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

Answer 2

Parece que esto ya se ha cerrado, sin embargo, en caso de que alguien se encuentre con estos temas de "^" en lugar de los iconos deseados.No solo quiere esconder el "^", sino tener las imágenes reales que muestran, ya que esto lo que entendí el problema inicial fue.

Cuando aparece algo como esto [1]: http://i.stack.imgur.com / 5gphz.jpg

Usando el último frasco de PrimeFaces que admite fontawesome fuera de la caja, asegurándose de que el brote sea correcto, podría ayudar

1. en su web.xml Agregar:

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

2. En su * .xhtml donde le gustaría agregar iconos fentales, entre las etiquetas de la cabeza, señale los CSS increíbles de la fuentes del frasco que tiene:

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

3. Finalmente los iconos de referencia correctamente por ejemplo.

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

Esto me ayudó.

vítores

Answer 3

Para el ^ problema, usted podría agregar la siguiente CSS de Estilo:

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

Esto anula la primefaces .ui-icon style {text-indent:-99999px}.....

En mi caso, a continuación, el icono se veía roto.Tuve un error 404 en la consola de firebug (NetworkError para woff o ttf).Para mí el siguiente enlace fue la solución: Evitar el sufijo se añade a los recursos cuando la carga de la página

Answer 4

http://www.primefaces.org/showcase/ui/misc/fa.xhtml Revise la demostración oficial, y puede encontrar el documento que dice que debe agregar algunos, así que sigue la instrucción.