Genesis 2.2.0 update causes conflict with FontAwesome for Menus

[londondeb]

I have several sites running on Genesis with FontAwesome for Menus. Immediately after installing the Genesis 2.2.0 update there was an issue with FA4Menu Icons not diaplaying correctly as before.

I had to revert all live sites to run on Genesis 2.1.2 until I can find a resolution. Would you have any ideas what would cause the issue or how to resolve? I will also contact the dev for FontAwesome for Menus and post back here if/when I find a solution.

Thanks,
Debra

http://wp-webworks.com

[Christoph]

Hi Debra,

please also contact the official Studiopress support at
my.studiopress.com/help

---

https://www.christophherr.com | Genesis Customizations | Buy me a coffee

[londondeb]

Hi Christoph I have reported to them too.

I can see there are others reporting the same issue. I'm assuming it's related to the WP 4.3 update because they did something with icons in that release. I'm confident someone will figure it out and issue a fix soon.

Thanks for the quick response though, much appreciated!

[David Chu]

Deb,
I had not seen FontAwesome For Menus before just now. I think I may have found a symptom, if not the cause.

I looked at your Webworks site, and saw some funky icons. Examining the code, I noted that the CSS generated looked incomplete, without explicitly naming a font-family. When I put that in in the Chrome Inspector, the icons showed right up. Below is an example. Your CSS didn't have the font-family line.

.fa-home:before {
    content: "\f015";
    font-family: "FontAwesome";
}

Since things were working before, I imagine the font-family "got through" before somehow. Maybe something in Genesis 2.2 crunched some of the minified CSS, or put something else out of sync.

I did update my homepage to Genesis 2.2, and did not have any problem with Font Awesome, presumably because I hand-coded all my CSS for it.

Sorry, definitely not a solution, but at least it's part of the scenario. I think you're right in waiting for the 2.2.1 version to see if that helps.

Here's a very random idea you could try - it's probably bunk, though. That plugin allows you to change the source of its CSS to a CDN source. Your site is using the plugin's code on your server.

Good luck,
Dave

---

Dave Chu · Custom WordPress Developer – likes collaborating with Designers

[londondeb]

Hi David,
Thanks for taking the time to look at this and respond I do appreciate it.

You probably (certainly) will know this but to explain for anyone else viewing the thread in search of a fix:

The CSS styling for FontAwesome4Menus (plugin) is specified in
appearance>menu>pagename(home)>CSS Classes(optional) "fa-home" displays the home/house icon.

Since the Genesis 2.2.0 update not only were the icons "missing" but even applying David's fix in the css file, the location, size and style of font awesome icons was still all wrong on the site. I've reverted to Genesis 2.1.2 so the site doesn't look like a dogs dinner until we find a proper fix.

There do seem to be quite a few other users having the same issue and StudioPress support are looking at it. I will post here when we find the fix.

Thanks again for the support.

[David Chu]

Interesting. Good luck!

Dave

---

Dave Chu · Custom WordPress Developer – likes collaborating with Designers

[Victor Font]

I have the Font Awesome 4 Menus plugin running on http://sunshinestateskinny.com/ with Genesis 2.2 and have not had any issues. I just inherited some finish work on this site and the previous developer had installed the Better Font Awesome plugin. Since the styles were already loading though that plugin, I turned off loading the menu plugins Font Awesome style sheets.

---

Regards,

Victor
https://victorfont.com/
Call us toll free: 844-VIC-FONT (842-3668)
Have you requested your free website audit yet?

[David Chu]

Great idea, Victor!
Besides who can resist font advice from you, obviously? I also like that plugin a whole lot.

You're the man,
Dave

---

Dave Chu · Custom WordPress Developer – likes collaborating with Designers

[jamesparkin]

This should correct issues with icons appears above menu items, disappearing on hover on and off.

1. Remember to use fa fa-icon in the css class do not use fa-icon anymore

2. Add Font awesome via CDN

3. IMPORTANT! You must use z-index:100; or your icon will flash on mouse over off

.genesis-nav-menu .menu-item:before {
color: #a5a5a3;
display: block;
font-family: Fontawesome;
font-style: normal;
font-weight: normal;
line-height: 0;
margin: 0;
position: relative;
z-index: 100;
text-align: left;
top: 27px;
vertical-align: bottom;
}

.genesis-nav-menu .menu-item:hover:before {
color: #a5a5a3;
display: block;
position: relative;
z-index: 100;
}

.genesis-nav-menu .current-menu-item:before {
color: #a5a5a3;
display: block;
position: relative;
z-index: 100;
}

[Author]

Posts