Prime Community Forum

Posted: **04 Aug 2016, 16:11**

If you try to use a Volt font icon e.g. icon-lightbulb in the <p:splitButton/> in the topbar.xhtml file, the icon is not rendered. Instead, a green arrow "^" is shown, although the generated xhtml says it uses the icon-lightbulb. FontAwesome font icons are rendered correctly.

Code: Select all

                    <p:splitButton value="Menu" icon="fa fa-wifi" appendTo="@this">
                        <p:menuitem value="Ideas" icon="icon-lightbulb" />
                    </p:splitButton>

Generated output for the <p:menuItem/>'s icon when using Volt font icons:

Code: Select all

<span class="ui-menuitem-icon ui-icon icon-lightbulb"></span>

Is this supposed to work like that? If not so, please let me know how I can make it work.

Posted: **04 Aug 2016, 16:44**

Please try with;

Code: Select all

[class^="icon-"], [class*=" icon-"] {
    background-image: none !important;
    text-indent: 0px;
}

Also, please change "fafa-wifi" with "fa fa-wifi" on icon attribute of splitbutton.

Posted: **05 Aug 2016, 09:20**

Wow, that works like a charm, thank you very much.

Thanks for the hint regarding "fafa-wifi". The blank is there in the original code though...

Posted: **05 Aug 2016, 11:17**

Glad to hear, thanks for the update!

Prime Community Forum

topbar.xhtml does not display Volt font icons

topbar.xhtml does not display Volt font icons

Re: topbar.xhtml does not display Volt font icons

Re: topbar.xhtml does not display Volt font icons

Re: topbar.xhtml does not display Volt font icons