topbar.xhtml does not display Volt font icons

Post Reply
fatdevelops
Posts: 10
Joined: 04 Feb 2015, 18:03

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.
Last edited by fatdevelops on 05 Aug 2016, 09:20, edited 1 time in total.
Wildfly 9.0.2, JSF 2.2 (Mojarra), PrimeFaces 5.3, PrimeFaces Extensions 4.0.0

User avatar
aragorn
Posts: 3228
Joined: 29 Jun 2013, 12:38

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.

fatdevelops
Posts: 10
Joined: 04 Feb 2015, 18:03

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...
Wildfly 9.0.2, JSF 2.2 (Mojarra), PrimeFaces 5.3, PrimeFaces Extensions 4.0.0

User avatar
aragorn
Posts: 3228
Joined: 29 Jun 2013, 12:38

05 Aug 2016, 11:17

Glad to hear, thanks for the update!

Post Reply

Return to “Volt”

  • Information
  • Who is online

    Users browsing this forum: No registered users and 1 guest