Wrenching a Font Awesome 5 Menu Plugin

Sometimes in technology you just have to whack a wrench at something to make it work.

Way back when I started at the Maricopa Community Colleges, there was a surly old guy named “Bill” who serviced computers in the building. I had an issue with a Mac, and called in for help.

Bill showed up, listened to my description of the problem, then grunted something about the hard drive. He popped the cover off the computer (maybe a Mac II?), and surprised me by pulling out a wrench and whacking the metal cover of the drive.

“That will do it” he said and left, heading outdoors for a smoke.

He was right.

In my coding work, I feel like I try similar wrench whacking techniques, though maybe a tad less deliberate than Bill.

So here’s the thing that came up. In my series of now four WordPress themes built atop HTML5 Up templates I have used now 2 different plugins to enable menus that can display social media links. Menus work well because users can easily edit and re-order their links. The icons are specified by entering a CSS class in the menu editor.

The one that has been working reliably is Font Awesome 4 Menus – a problem recently pointed out to me by Chris Lott who really wanted a Mastodon icon (and I bless him for notifying me via a GitHub issue) I knew marginally was a possible problem. That plugin is a few years old, and is built upon the version 4.7 of Font Awesome while the newest version (5.x) has more than 10 times as many icons.

But more changed than the icons, the way Font Awesome works by the CSS class names it references, was a bit more complex. Where a version 4 CSS code for the twitter icon was fa fa-twitter in version 5 there are now separate libraries for solid icons, brand icons, regular icons, so the same code would be fas fa-twitter but there are other ones line fas fa-dog and far fa-clock.

Before applying any code to the problem, I checked first in the support forums and found a few suggestions that only worked marginally. The plugin allows one to specify a URL to a CSS file, but as the plugin was written for the simpler range of class options. And there seemed to be no support or responses form the plugin’s developers.

Another code suggestion in the forums got me closer but it still did not provide access to the full set of icons. Now I whacked the code with my wrench (actually just commenting out a few lines) and got it working.

But almost no one is going to monkey around with modifying a plugin… well except me (and Bill if he’s around?). I more or less went through the plugin, modified it to use the newer CSS, changed all the 4s to 5s, removed the promotion links for the original developer, and made it into my own plugin, here for testing as Font Awesome 5 For Menus.

You can see it in action on the demo site for the WP-Dimension theme where there is a Maston icon just to show Chris it works.

and yes, I sort of branded it myself -;) I am able to do all this as the original plugin is licensed as GNU

Go GNU.

The main difference if you update this plugin, is you have to now include the “family” classes found on an entry from Font Awesome; previously, for twitter you just would enter fa-twitter in the class box and the plugin would add the extra fa it needs.

I’ve only lightly tested the plugin, and have no idea if the shortcodes in it work (I am only interested in the menu function). I’ve never submitted one officially to WordPress, so for now it’s just on github https://github.com/cogdog/font-awesome-5-menus

The Calling Card themes will all need a CSS tweak to make the icons a bit bigger; until I update them all, you can adjust sizes by using the WordPress Customizer to add CSS:

But that was pretty much a whack with a wrench. I would hope Bill would be proud. But the best I could hope for is a grunt.

UPDATE (January 9, 2019)

The original plugin had some shortcodes for rendering icons. I decided to see if they even worked- a small code tweak was made for the basic embedding one. 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 <class="fab fa-twitter"></i>; but hey I’m like the only soul that likes writing raw HTML.

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

which produces:

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

which produces:

Still, I would think it’s almost easier to enter the Font Awesome HTML for doing this kind of stuff, but I just want to make sure this all works.

---

Featured Image: