This is searchable archive of our old support forums, which operated from 2012 - 2016. To find out how to get support for your current theme, please visit our support page.

fontawesome icons size increase on hover in menu

  • Creator
  • #7560

    I like the idea of using font-awesome icons in menus. I followed this features page to make place them in the menu.

    Then I wanted the fontawesome menu icon to increase in size when hover over.
    I added this CSS:
    #primary-menu>li>a:hover .sf-sub-indicator, #primary-menu>[class^=”menu-icon-“]> a:hover [class^=”icon-“] {
    line-height: 1em;
    font-size: 1.5em;

    It works, but the state does not persist when a child drop-down menu is hovered over.
    I have tried to figure out how to apply this CSS to the li or the ul, but I am stuck.
    Seems like a good addition to the forums…
    Can you help?

Viewing 2 replies - 1 through 2 (of 2 total)
  • Author
  • #7563
    Jason Bobich

    In CSS, when you use the “>” between your selectors, it means you’re targeting the elements directly within. So, for example, say you have:

    <ul class="my-list">
    	<li>Parent Item 1</li>
    	<li>Parent Item 2</li>
    	<li>Parent Item 3
    			<li>Child 1</li>
    			<li>Child 2</li>
    			<li>Child 3</li>
    	<li>Parent Item 4</li>
    	<li>Parent Item 5</li>

    If you were to do the following, you’d be targeting all the list items within “my-list” — li { ...  }

    But if you did this, it would target only the Parent level items above and ignore the list items past that first level directly below “my-list” — > li { ... }

    So, looking at the CSS you’re posting, can you now see why it would only effect the top level?


    Hi Jason,
    It needed that I think.
    It also needed this as I worked through it:

    #primary-menu li:hover a [class^="icon-"]{
    color: green;
    font-size: 1.5em;
Viewing 2 replies - 1 through 2 (of 2 total)
  • You must be logged in to reply to this topic.