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

htmlcssicon-fonts

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

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

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

The challenges of utilizing breakpoints effectively within Tailwind CSS

So here's the issue. I've gone through various other queries related to this problem but haven't found a solution yet. Tailwind seems to be functioning well except for breakpoints. This is what I have in the head <meta name="viewpo ...

htmlcsstailwind-cssbreakpoints

A situation where the event onclick fails to occur within NextJS

index.js: function Home () { return <div> <html> <head> <title>Site</title> </head> <body> <div class= 'v5_3' onclick = "func_click()"></div> </b ...

javascripthtmlcssnext.js

Adjust the height of the Iframe to match the content within it

After conducting my research, I have not been able to find a solution. Although I am not an expert in jQuery, it seems that the code is not functioning properly. Within the iframe are links that expand when clicked to display content. However, the height o ...

javascriptjqueryhtmliframeexpand

What is the best method for adjusting height in MaterialUI components?

Is there a way to remove this white line from the image?view image here When I set the height to 100%, it appears like this:view image here ...

cssreactjsmaterial-uiheight

Error message: Injector Error: R3InjectorError(Standalone[_AppComponent])[_WebService -> _WebService -> _WebService] occurred

Being a student, I must apologize in advance for any mistakes in terminology or gaps in my understanding. I am currently developing an Angular front-end to communicate with my backend API. However, I keep encountering the following error in the web page c ...

htmlangulartypescriptfrontendbackend

What is the reason that certain CSS pages are not being utilized on my website?

I am facing issues with rendering my website on a tablet device, specifically with my last 2 css pages (800px.css and 800pxland.css). Despite working fine just hours ago, now they seem to be neglected while all the other ones work perfectly. I have tried ...

cssftpmediatabletcloudflare

Creating a hover effect on a specific area of a map is a useful technique

Can someone please help me create a hover effect for areas in maps? Below is the code for the map. Thank you in advance! Here is the image. <img src="[CR_kraje_1_úroveň_v1] (imported)" width="770" height="443" border="0" usemap="#map" /> &l ...

htmlcssdictionaryhoverarea

Conceal a div until reaching the end of the webpage by scrolling

Currently, I am working on a web page inspired by music release pages (check out an example here). My goal is to have certain hidden divs at the bottom of the page only reveal themselves once the user has scrolled all the way down, with a delay of a few se ...

javascriptjqueryhtmlscrollhide

Which Express.js template allows direct usage of raw HTML code?

I am in search of a template that utilizes pure HTML without any alterations to the language, similar to Jade but keeping the HTML as is. The reason behind this inquiry is: I prefer the simplicity and clarity of HTML I would like to be able to easily vi ...

javascripthtmlnode.jsexpresspug

"Enhance your website navigation with the Bootstrap BS3 navbar clc Dropdown-Submenu feature

Utilizing Bootstrap BS3 for the construction of my Django website. I created a dropdown-submenu that is operational on http://www.bootply.com/nZaxpxfiXz# However, when implementing the same in my project, I encountered: The issue is that the dropdown-men ...

jquerycssdjangotwitter-bootstrapdrop-down-menu

Tips for entering the lowest and highest values into the input field

I am looking to track the daily minimum and maximum prices of shares for various companies. Currently, I'm attempting to utilize this tag: <input type="number" name="number" placeholder="minprice"> <input type="number" name="number" place ...

htmlcss

Can someone explain the function of statements such as (function () { // code; }.call(this)); within a JavaScript module?

By utilizing the Function.prototype.call() method, it becomes possible to create a function that can be applied to various objects. I delved into the code of , which had been minified and required to be un-minified for examination. The structure of the co ...

javascripthtmlnpmminifiedjsfunction.prototype

What is the process for adding a Contact Us page to a website?

I recently created a website using html, css and Javascript. I would like to include a 'get in touch' page where visitors can send me messages directly on the site. What steps should I take to make this happen? Is it necessary to set up a databas ...

javascriptcss

How to position two Bootstrap 4 Navbars side by side

I'm currently experiencing an alignment issue with two stacked navbars in my code. I want to align the upper navbar with the lower one, but I've tried various approaches without much success. Is there a problem with the buttons or something else ...

htmlcsstwitter-bootstrap

What's the best way to modify information within a specific div that was created using a jQuery templating engine?

During runtime, I am receiving the following JSON data through an HTTP POST request: {"d": {"Result":"OK","Records": [{ "Id":1, "QText":"Explain marketing and the usage of Marketing in short", "AText":"demo answer", "Marks":11, "Comment":"n ...

jqueryhtmlajaxjquery-templates

Deselect the DOM element

Here is a jQuery code snippet: $(document).ready(function () { $(".story-area > h1, .story-area > p, .story-area > div > p").text(function () { return convertString($(this).text()); }); }); Additionally, there is a function de ...

javascriptjqueryhtmlcss

retrieve information from a div using an AJAX request

I don't have much experience with ajax and javascript, but I need some assistance, so I will do my best to explain clearly! Below is the JavaScript associated with a button: $('#button-confirm').on('click', function() { $.ajax({ ...

javascriptjqueryhtmlajaxopencart

Achieve a full-height sidebar design similar to Wordpress using flexbox functionality

Working on a web app that features a tools sidebar with a fixed width requirement amidst fluid content. Explored using flexbox to achieve this, but encountered an issue where the main box only takes the height of the viewport instead of the entire site&ap ...

htmlcssflexboxsidebar

Focus on a specific div element while bypassing its parent

Can I directly target the element with .div-3 class, even if its parent does not have an id or class? <div class="wrapper"> <div> <div> <div class="div-3"> </div> </div> </div> </div> I am aware ...

htmlcss

How to use jQuery to set a background image using CSS

I've been working on setting backgrounds dynamically with a jQuery script, but it seems like the .css function is not working as expected. Here's the code snippet: $(document).ready(function () { $(".VociMenuSportG").each(function () { ...

javascriptjqueryhtmlcss