Skip to content
master
Switch branches/tags
Code

Latest commit

 

Git stats

Files

Permalink
Failed to load latest commit information.
Type
Name
Latest commit message
Commit time
 
 
css
 
 
 
 
 
 
 
 
 
 
 
 

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!

Support me on Patreon Support me on via PayPal


A slight tweak to the Font Awesome 4 Menus plugin updated to work with Font Awesome 5 used in my Calling Card WordPress themes.

Below are some mods of the original plugin readme.

See it in action:

Description

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.

Installation

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)'.

Adding Font Awesome classes to Github menu item

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).

Use [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.

You can include the size and rotation classes as well. Here I entered in my WordPress editor:

 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:

Example shortcode displayed

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]

which produces

Example stack shortcode of red circle around a camera displayed

YMMV

Updates

  • 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 fa shortcode and verify the fa-stack one works.
  • 5.0 - the very first attempt to get this to work, just tweaked the original plugin slightly.

.

About

WordPress plugin for adding Font Awesome Icons to Menus

Resources

License

Packages

No packages published