Font Awesome 5 For Menus
by Alan Levine https://cog.dog/
If this kind of stuff has any value to you, please consider supporting me so I can do more!
Below are some mods of the original plugin readme.
See it in action:
This is an update to the Font Awesome 4 Menus plugin by New Nine Media updated to work with Font Awesome 5 (their plugin has not been updated).
The settings allow you to use the Font Awesome 5 fonts included in the plugin, or to specify a URL to a CDN hosted one, or to skip using if one is enabled by another plugin or theme.
With this plugin, just add the full Font Awesome classes, e.g.
fab fa-(icon name) as a class/classes to your menu and the plugin will pull that out, put the icon before or after your link text, and wrap your link text in a span so you can show or hide it as you see fit.
In Font Awesome 5 Menus, you also have ability to add multiple Font Awesome classes for multiple effects.
In addition, you can use shortcodes to add icons to your posts and pages, as well as shortcodes to take advantage of the new stacked feature of Font Awesome 5.
Download this repository as a .zip file then upload it as a plugin in your WordPress dashboard.
Then, activate the plugin through the 'Plugins' menu in WordPress. Look for a menu item under the Settings menu.
Frequently Asked Questions
Why not use the Official Font Awesome Plugin
It's great! I use it often. This one merely makes it possibly to create a WordPress menu of icons only by using CSS class names. There are no conflicts.
Where can I find all of the available icons?
Head over to the Font Awesome website to find a full list of icons available. The plugin works with all free icons.
How to I add an icon to my menu?
Go to Appearance -> Menus. Use the Screen Options tab (upper right) and check the box for CSS Classes to make it available for all menu items.
Select which menu item to which you want to add the icon and add the icon class(es) under 'CSS Classes (optional)'.
To add the home icon to your 'Home' link, enter "fas fa-home" (without quotes) as a class. To make it spin, add "fas fa-home fa-spin" as your classes.
Save your menu and enjoy the icons!
How do I use the shortcodes?
It took some digging to check that these work (the original plugin had no explanation of the stacking shortcode).
[fa class="fab fa-twitter"] to create a twitter icon. Of course, if you are doing this, why not go to the HTMl editor and just enter
<i class="fab fa-twitter"></i> but hey.
I got my [fa class="fas fa-apple-alt fa-5x"] and then I went [fa class="fab fa-twitter fa-rotate-270 fa-5x"]
which the plugin renders as:
There is also a
[fa-stack] shortcode for rendering stacked icons. This format requires opening and closing shortcode tags, and inside you will enter separate
[fa] shortcodes for the icons- e.g. for 2 icons stacked (note wrapping one in a span tag to color it, if anyone really uses this I could add a wrapping style option)):
[fa-stack class="fa-2x"] [fa class="fas fa-camera fa-stack-1x"] <span style="color:Tomato">[fa class="fas fa-ban fa-stack-2x"]</span> [/fa-stack]
- 5.2 - cleaned up documentation for hopeful submission to WordPress repo. Wish me luck.
- 5.1 - added plugin links to settings, and renamed the menu name to not be confused with the official Font Awesome plugin
- 5.01 - adjusted to fix
fashortcode and verify the
- 5.0 - the very first attempt to get this to work, just tweaked the original plugin slightly.