CODEWITHSUNDEEP
htmlcssicon-fonts
Startec
Startec

Reputation: 13206

Icon Fonts Not Vertically Centered With Text

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

Upvotes: 1

Views: 1223

Answers (2)

MarmiK
MarmiK

Reputation: 5775

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.

Upvotes: 2

SlyBeaver
SlyBeaver

Reputation: 1312

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;
}

Upvotes: 1

Related Questions