1

I am using icon fonts in a nav list and I want text to be in between two of the icons. The problem is that the icons and the text do not match up well. The icons area obviously higher than the text so when they are both on the baseline, the icons go a lot higher. Is there any solution I can use by putting the text in a span? I have tried adjust every parameter I know:

HTML:

<nav class="nav">
    <ul>
        <li><span data-icon="&#xE603;"></span><h2>HOME</h2></li>
        <li><p>ICON FONT FTW</p></li>
        <li><span data-icon="&#xE603;"></span><h2>ABOUT</h2></li>
        <li><span data-icon="&#xE603;"></span><h2>CONTACT</h2></li>
    </ul>
</nav>

CSS:

nav {
    font-size: 1.2em;
    background: gray;
    text-align: center;
}
nav li:first-child {
    display: inline-block;
}

nav li {
    display: inline-block;
}

enter image description here

Startec
  • 12,496
  • 23
  • 93
  • 160

2 Answers2

2

I will say we need to reset the style first as we are involving here tags(h2, p) which has different behavior over browsers.

TO overcome this I have implemented old technique. of setting margin and padding to reset the style.

CSS:

nav {
    font-size: 1.2em;
    background: gray;
    text-align: center;
    padding:0;margin:0;
}
nav li:first-child {
    display: inline-block;
}
nav li {
    position:relative;
    display: inline-block;
    vertical-align:middle;
}
nav h2,nav div{
    position:relative;
    display:inline-block;height:100%;width:100%;
    padding:0;
    margin:20px auto;
}
nav h2{
}
nav div{
}

HTML: has changed it a bit to see the icons in fiddle.

<nav class="nav">
    <ul>
        <li><span data-icon="&#xE603;"></span><h2>&#xE603;</h2></li>
        <li><div>ICON FONT FTW</div></li>
        <li><span data-icon="&#xE603;"></span><h2>&#xE603;</h2></li>
        <li><span data-icon="&#xE603;"></span><h2>&#xE603;</h2></li>
    </ul>
</nav>

Please check my fiddle this gives me fine results.

MarmiK
  • 5,639
  • 6
  • 40
  • 49
  • Excellent. I think the real key here was `vertical-align: middle` which I have not used before. Thank you. (Also, thank you for the SO advice to the other poster) – Startec Jul 25 '14 at 04:42
  • You are most Welcome :) -- Yes, v-align is always useful in such case. just make sure it goes to parent of target element :) – MarmiK Jul 25 '14 at 04:56
1

You can use line-height. For example: HTML:

<nav class="nav">
    <ul>
        <li><span data-icon="&#xE603;"></span><h2>HOME</h2></li>
        <li><p class="lineHeight">ICON FONT FTW</p></li>
        <li><span data-icon="&#xE603;"></span><h2>ABOUT</h2></li>
        <li><span data-icon="&#xE603;"></span><h2>CONTACT</h2></li>
    </ul>
</nav>

CSS:

nav {
    font-size: 1.2em;
    background: gray;
    text-align: center;
}
nav li:first-child {
    display: inline-block;
}

nav li {
    display: inline-block;
}

.lineHeight{
line-height: 1.3em;
}
SlyBeaver
  • 1,272
  • 12
  • 22