Question

J'avais envie d'inclure des icônes FontAwesome dans Primefaces, et finalement Optimus a publié hier cette superbe nouvelle.--> http://blog.primefaces.org/?p=3004#comment-5422

Intégré par Max Dicson Nous devrions désormais pouvoir les utiliser.

Cependant, en suivant la vidéo du didacticiel, je ne parviens pas à résoudre le problème.

  • Utiliser PF4.0 mais JSF 2.1 (la seule différence avec la vidéo)
  • Ajout du dernier maven-FontAwesome.jar --> http://mvnrepository.com/artifact/org.webjars/font-awesome/4.0.3

  • Ajout des types MIME dans le fichier web.xml

  • Appeler le fichier CSS correspondant avec <h:outputStylesheet name="webjars/font-awesome/4.0.3/css/font-awesome.css">

Mais ne pas pouvoir obtenir le bug fa souhaité.

Une idée?Merci!

Était-ce utile?

La solution

Le ^ peut être enlevé avec 

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

Autres conseils

Il semble que cela a déjà été fermé, cependant au cas où une personne circule dans ces problèmes de "^" au lieu des icônes souhaitées.Ne veut pas simplement cacher le "^", mais plutôt avoir les images réelles montrant, comme ce que j'ai compris le problème initial était.

Quand quelque chose comme ça se présente [1]: http://i.stack.imgur.com / 5gphz.jpg

Utilisation du dernier bocage PremiersFaces qui prend en charge Fontaweomeome de la boîte, en veillant à ce que le souffle soit correct, pourrait aider

  1. dans votre web.xml Ajouter: 

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

  2. dans votre * .xhtml où vous souhaitez ajouter des icônes de Fontawesome, entre les étiquettes de tête, pointez sur le CSS de Font-Awesome du pot que vous avez: 

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

  3. Enfin des icônes de référence correctement par ex. 

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

    4. Cela m'a aidé.

    acclamations

Pour le ^ problème, vous pouvez ajouter le style CSS suivant :

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

Cela remplace les primefaces .ui-icon style {text-indent:-99999px}.....

Dans mon cas, l'icône semblait cassée.J'ai eu une erreur 404 dans la console Firebug (NetworkError pour woff ou ttf).Pour moi, le lien suivant était la solution : Empêcher l'ajout d'un suffixe aux ressources lors du chargement de la page

http://www.primefaces.org/showcase/ui/misc/Fa.xhtml Vérifiez la démo officielle et vous pouvez trouver le document indiquant que vous devez ajouter quelques-uns, alors suivez les instructions.

Licencié sous: CC-BY-SA avec attribution
Non affilié à StackOverflow
scroll top