• Skip to main content
  • Skip to forum navigation

StudioPress

  • Shop for Themes
  • My StudioPress

Forum navigation

  • Home
  • General Genesis Discussions
  • StudioPress Themes
  • Genesis Blocks
    • Genesis Blocks
    • Genesis Custom Blocks
  • Retired Themes
  • FAQs
  • Forum Rules
  • Internationalization and Translations
  • Forum Bugs and Suggestions
  • Forum Log In

Are You Using The WordPress Block Editor?

Genesis now offers plugins that help you build better sites faster with the WordPress block editor (Gutenberg). Try the feature-rich free versions of each plugin for yourself!

Genesis Blocks Genesis Custom Blocks

Genesis 2.2.0 update causes conflict with FontAwesome for Menus

Welcome!

These forums are for general discussion on WordPress and Genesis. Official support for StudioPress themes is offered exclusively at My StudioPress. Responses in this forum are not guaranteed. Please note that this forum will require a new username, separate from the one used for My.StudioPress.

Log In
Register Lost Password

Community Forums › Forums › Archived Forums › General Discussion › Genesis 2.2.0 update causes conflict with FontAwesome for Menus

This topic is: not resolved

Tagged: Genesis 2.2.0 Update

  • This topic has 8 replies, 5 voices, and was last updated 7 years, 1 month ago by jamesparkin.
Viewing 9 posts - 1 through 9 (of 9 total)
  • Author
    Posts
  • September 4, 2015 at 9:19 am #164572
    londondeb
    Member

    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
    September 4, 2015 at 9:37 am #164577
    Christoph
    Member

    Hi Debra,

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


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

    September 4, 2015 at 10:03 am #164582
    londondeb
    Member

    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!

    September 4, 2015 at 12:51 pm #164599
    David Chu
    Participant

    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

    September 4, 2015 at 2:44 pm #164610
    londondeb
    Member

    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.

    September 4, 2015 at 3:07 pm #164613
    David Chu
    Participant

    Interesting. Good luck!

    Dave


    Dave Chu · Custom WordPress Developer – likes collaborating with Designers

    September 4, 2015 at 3:51 pm #164614
    Victor Font
    Moderator

    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?

    September 4, 2015 at 4:22 pm #164619
    David Chu
    Participant

    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

    January 2, 2016 at 6:05 pm #175412
    jamesparkin
    Participant

    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
Viewing 9 posts - 1 through 9 (of 9 total)
  • The forum ‘General Discussion’ is closed to new topics and replies.

CTA

Ready to get started? Create a site or shop for themes.

Create a site with WP EngineShop for Themes

Footer

StudioPress

© 2023 WPEngine, Inc.

Products
  • Create a Site with WP Engine
  • Shop for Themes
  • Theme Features
  • Get Started
  • Showcase
Company
  • Brand Assets
  • Terms of Service
  • Accptable Usse Policy
  • Privacy Policy
  • Refund Policy
  • Contact Us
Community
  • Find Developers
  • Forums
  • Facebook Group
  • #GenesisWP
  • Showcase
Resources
  • StudioPress Blog
  • Help & Documentation
  • FAQs
  • Code Snippets
  • Affiliates
Connect
  • StudioPress Live
  • StudioPress FM
  • Facebook
  • Twitter
  • Dribbble