How to add “Font Awesome Symbols” in menu lists correctly?

[Anonymous]

Hello,

The Plugin “4Awesome 4 Menus” is activated. Hope this is the right way to get symbols in the menu…?
Or isn´t it neccesary?

I have recognized the CSS Class Option under the Menu Settings. All Pages now show the symbols defined by css class option, f.e. “fa fa-camera”. The screen will look fine, if it´s only a single page link.

The screen design will be broken, when more pages stacked to be a list. (picture)

Adding the css class to the name (i-tag) is a solution, but the title shown on mouseover is not the right one. Also adding a name in the html-title field doesn´t work. The displayed name also shows the i-tag-code.

Now I don´t know, what is the right way to a correct looking menu with symbols.

Thanks,

René

[admin]

Hello Rene,

The Plugin “4Awesome 4 Menus” is activated. Hope this is the right way to get symbols in the menu…?
Or isn´t it neccesary?

It is not necessary. Future WordPress theme has built-in support to handle Font Awesome and Glyphicons in the menu. Please Deactivate the Plugin.

How to add Font Awesome or Glyphicon in the Menu ?

Simply add icon class e.g. “fa-home” in the “Title Attribute” of Menu. All is Done…

Another Reference

Future WordPress theme is using Bootstrap Walker Class to handle this feature with some modifications to support Glyphicons as well. Screen shots at the following page might be helpful to you.

Read the section – Displaying the Menu

https://github.com/twittem/wp-bootstrap-navwalker

Enjoy

[Author]

Posts