Text with Icon Fonts Does Not Align Vertically

Question

Text with Icon Fonts Does Not Align Vertically

I'm using icon fonts in a nav list and I want to place text between two of the icons. However, there's an issue with alignment - the icons are positioned higher than the text, causing them to not match up well. Is there a solution to this problem by wrapping the text in a span? I've tried adjusting various parameters but haven't found a satisfactory solution yet:

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

html css icon-fonts

Answer 1

Answer №1

In order to ensure consistent styling across different browsers, it is important to reset the styles first when working with tags like h2 and p.

To achieve this, I have utilized an old technique of setting margins and paddings 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{
}

I made some changes in the HTML to view the icons on the 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>

You can view my results on the following fiddle. Thank you!

Answer 2

In order to ensure consistent styling across different browsers, it is important to reset the styles first when working with tags like h2 and p.

To achieve this, I have utilized an old technique of setting margins and paddings 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{
}

I made some changes in the HTML to view the icons on the 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>

You can view my results on the following fiddle. Thank you!

Answer 3

Answer №2

To adjust the line height, you can utilize the line-height property. Here is an example of how you can do it:

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

Below is the CSS code for this styling:

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

Answer 4

To adjust the line height, you can utilize the line-height property. Here is an example of how you can do it:

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

Below is the CSS code for this styling:

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

Text with Icon Fonts Does Not Align Vertically

Answer №1

Answer №2

Similar questions

Expanding the outer div with Jquery's append() function to accommodate the inner div elements perfectly

Alter the color of Material UI Raised Button when it is hovered over

I am having issues displaying my background image

Tips for applying a linear gradient mask to div elements?

Reposition a Single Item on the Top Menu to the Right

Apply the `text-overflow: ellipsis` property to truncate the text of two items within a flex column, which is contained within

In the iOS app when the Ionic HTML5 select keypad is opened, a bug causes the view to scroll upwards and create empty space after tapping the tab

Having trouble setting margin-bottom to 0 in react and antd - why won't it reset?

Hide the button when you're not actively moving the mouse, and show it when you start moving it

To view the contents of the dropdown list on an iPhone, simply tap the arrow key next to the mobile dropdown list and the contents will be

Retrieve the updated text content from a textarea using JavaScript/jQuery

Transforming JSON data into an HTML template

What are the best practices for implementing the CSS id selector?

Stop iFrame from inheriting parent CSS styles

Ways to eliminate the existing image during an image upload process

Please explain the display property used in Bootstrap input groups

The functionality of Jquery-chosen appears to be malfunctioning when applied to a select element

"Preload the search query from the table, link it, and then send it to Ajax for

Update the icon within the expandable display

Learn how to call class methods using jQuery events by utilizing the on() method