The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums CSS Aligning icon font background in navigation, CSS

  • This topic is empty.
Viewing 3 posts - 1 through 3 (of 3 total)
  • Author
  • #40269

    I am using an icon font for one of the list items in my main navigation.

    I put this icon into it’s own class, and gave it a font size so it matches the rest of the navigation. I also had to assign a specific line height for the icon font so it lines up.

    Now the problem is when I hover over the icon (I am using a background colour), there is a gap underneath which is visible as you hover over it. This wouldn’t be a problem if I wasn’t using a background colour, but I would really like to keep this.

    To illustrate what I mean, you can see the image here…

    Any ideas on how I can correct this, so that when you hover, there is no gap underneath?

    I have uploaded the HTML and CSS here…


    @croydon86 I just changed the iconfont class in your CSS.

    This seems to be a lot of markup for a simple menu bar.


    Hi Christopher, thank you so much, I can’t believe it was just a case of adding an ‘a’ as I had already tried doing the height but that wouldn’t work.

    Yeh you’re right, there is a lot of markup, I am using twitter bootstrap as a base and they use a lot of code.

    Thanks again!!

Viewing 3 posts - 1 through 3 (of 3 total)
  • The forum ‘CSS’ is closed to new topics and replies.