FontAwesome & Other Icons

[thomas_s]

Hi,

I am using Barcelona-Theme and for some reason UI-Icons and FontAwesome Icons are not rendered. I added them to the sidebar, as in the example of the theme. Especially I used them in th components:

• <pa:tab>

• <p:menuitem>

Some as home and help are being rendered, no luck with, e.g., fa-sign-out or linear-scale or some Other UI as well as other FontAwesome Icons. Just to mention it, I did activate FontAwesom in web.xml, by:

Code: Select all

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

This results, for instance, in:

Code: Select all

//will be working
<p:menuitem id="meeditflow" value="Home" icon="home" outcome="/dashboard"/>

// all of the following won't be working
<p:menuitem id="meeditflow" value="Home" icon="ui-icon-linear-scale" outcome="/dashboard"/> 
<p:menuitem id="meeditflow" value="Home" icon="linear-scale" outcome="/dashboard"/> 
<p:menuitem id="meeditflow" value="Home" icon="fa-angellist" outcome="/dashboard"/>
<p:menuitem id="meeditflow" value="Home" icon="fa fa-angellist" outcome="/dashboard"/>

I do not get any errors in logs. What could be wrong?

Thanks
Thomas

[thomas_s]

In addition, I was looking to Icons description und ShowCase FontAwesome and also in the Barcelona Theme to description under utils.xhtml.

In the template section menu.xhtml I recognized that you do not use the Icon names but things like

Code: Select all

icon=""

Do I have to provide this kind of expressions? How do I know to translate them to the corresponding Icons in both FontAwesome and the Icon-Lib defined in utils.xhtml?

[Thomasbuckley]

Good Work...

[mert.sincan]

Added font-awesome support to next Barcelona release; https://github.com/primefaces/barcelona/issues/2

Barcelona and Ultima are layouts that have Material design. Therefore, they use Material icons. For icons, you can use this link; https://material.io/icons/

Also, you need to add icon code for IE9 and below instead of icon name. Please examine the above link.

[thomas_s]

Thanks for your reply! I recognized that FontAwesome still seems to work for all widgets not specific to Barcelona theme.

I was almost about to ask how to retrieve the icon font encoding, but I just recognized it when i clicked on one of the icons. So again, thanks for the link. And for others who try to use the icons: if the name is one word it is possible to just reference the icon by name otherwise you need to use the encoded reference to it.

[mert.sincan]

Thanks for the update!

[jilles]

Another way to use icons, we can see in material design site
looks something like that:

<i class="material-icons">account_circle</i>

every icon that https://material.io/icons/ has, you can use a name for it

hope this helps you

[mert.sincan]

Thanks @jilles +1;)