Attempting to place my icon font in a higher position than my link to achieve a similar effect to the one I am currently experiencing with my

I am currently working on a menu design that incorporates icons (images) above my menu links.

However, I have decided to switch from using icon images to utilizing icon-fonts from the 'Font-Awesome' library.

Despite this change, I am struggling to achieve the same effect with icon-fonts as I had with my image icons placed above the links.

For instance, in the example below, I have used my home image as an icon above the "NEWS" and "LOGOUT" links, while for the "USERS" link, I attempted to use an icon font which is not positioned above the link.

Is there any way to achieve the same visual effect with icon fonts as I did with icon images?

Here is the code snippet:

This is my html:

<div id="header">
    <div class="content">
        <ul class="menu">
            <li class="li"><a href="#" class="home">Home</a></li>
            <li class="li"><a href="#" class="post">News</a></li>
            <li class="li"><a  href="#" class="user"><i style="font-size:2em; color:#fff;" class="fa fa-home"></i>Users</a></li>
            <li class="li"><a href="#" class="exit">Logout</a></li>
        </ul>
    </div>
</div>

My css:

body{background:#ccc;}

#header .content .menu{
    list-style:none; 
    display:inline;
    margin:10px auto;
}

#header .content .menu .li
{
    float:left;
    position:relative;
}
#header .content .menu .li a
{   
    float:left;
    display:block;
    width:74px;
    text-align:center;
    font-size:14px;
    padding:40px 15px 10px 15px;
    text-transform:uppercase;
    text-decoration:none;
    color:#FFF;
}

#header .content .menu .li .home{
    background:url(http://i.imgur.com/7UA7WYr.png) top 10px center no-repeat;
}

#header .content .menu .li .post{
    background:url(http://i.imgur.com/7UA7WYr.png) top 10px center no-repeat;
}

/*#header .content .menu .li .user{
    background:url(http://i.imgur.com/7UA7WYr.png) top 10px center no-repeat;
}*/

#header .content .menu .li .exit{
    background:url(http://i.imgur.com/7UA7WYr.png) top 10px center no-repeat;
}

#header .content .menu .li:hover{
    background-color:rgba(0,103,105,0.5);
}

Answer №1

To adjust the position, you can utilize absolute positioning and manipulate it with margins. For example, take a look at the CSS code snippet that I included in your fiddle:

position:absolute; 
margin-top:-30px;

You can view the outcome here

Answer №2

To show the icon properly, just make sure the element containing it has a style of display: block;

Visit this jsfiddle link for an example

#header .content .menu .li i { display: block; }

Answer №3

To create a space between the icon and label, simply insert a line break.

<a href="#" class="profile"><i style="font-size:2em; color:#fff;" class="fa fa-user"></i>
<br />
Profile</a>

http://jsfiddle.net/q12Ab/8/

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

What is the best way to arrange 4 divs with 2 on each line?

Consider the divs provided below: <body> <div id="f1">{{ f1|safe }}</div> <div id="f2">{{ f2|safe }}</div> <div id="f3">{{ f3|safe }}</div> <div id="f4"> ...

Tips for perfectly centering a SPAN element within a DIV both vertically and horizontally

Here is an example of my HTML code: <div id="slideClick"> <div style="padding: 0; margin: 0 auto; width: 100%; height: 100%; text-align: center; border: 1px solid blue;"> <span class="sideMsg">MESSAGES</span> </d ...

What are the consequences of submitting a form to a different website through POST method?

Dealing with a CMS that does not offer an easy way to add a NodeJS route for handling form data can be quite challenging. I'm considering the following setup - would this be considered bad practice or unsafe? Server 1 (Ghost CMS) : www.domain.com &l ...

Transferring information from a form with multiple fieldsets to php

I am facing an issue with my form that is built using multiple fieldsets. The problem is related to passing values from each fieldset to welcome.php upon submitting the form. However, when I click submit, nothing happens and the values are not displayed. A ...

Examples of merging responsive design and equal height columns in CSS:

As a beginner in CSS, I am facing challenges in creating a responsive layout that adjusts based on the screen it is viewed on and achieving equal heights in columns. While I have been able to address these issues individually, combining them has proven to ...

Submitting a form via email without the need for PHP

Currently, I am focusing on a project that is small and emphasizes presentation more than security. The main objective is to create a form where users can input data, then click submit for all the information gathered to be sent to a specified 'mailt ...

Tips for implementing jQuery on a CSS selector's :before pseudo-element

My dilemma involves creating a div using CSS with an added X at the top-right corner using the before pseudo-class. How can I implement a function to close this div by clicking on the X with the assistance of javascript? https://i.sstatic.net/Z5uSq.png C ...

Firefox and IE are unable to make changes to cssRules

To update existing global CSS rules, I access the document.styleSheets property to locate the rule and make modifications. The selector can be modified by accessing the selectorText property. Sample CSS code: <style type="text/css"> .class { ...

Problem with CSS hovering on images when hovering on links?

While attempting to add 2 hover images to my website, I encountered an issue where a black border appeared in the middle of the images. This was caused by the hover effects on the links. Below is the code snippet: a:hover,a:active { color:Black; o ...

Guide on generating a child element in a React application using server response

I have developed a react application with multiple nested routes. One of the nested routes utilizes a backend API that returns complete HTML content. My goal is to display this HTML content with the same styling in my UI without directly manipulating the ...

Switch between light and dark mode on a webpage using HTML

I am looking to create a script using JavaScript, HTML, and CSS that can toggle between dark mode and night mode. Unfortunately, I am unsure of how to proceed with this task. https://i.sstatic.net/xA3Gq.png https://i.sstatic.net/v5vq5.png My goal is to ...

New ways to style Links in NextJs 13

I am relatively new to Next.js and I am attempting to create a menu with a hover effect using the following code: import Link from 'next/link'; const MenuItem = ({ href, label }) => ( <Link href={href} className="menu-item"> ...

What is the best way to create a miniaturized image of a webpage for sharing on Facebook?

I'm looking for a way to post a link to users' Facebook walls with a thumbnail image of their created page. The page is in HTML format and stored as a series of 'elements' in the database, each with its size, position, and content. Is i ...

Seeking a material design template for mandatory form patterns

I'm struggling with getting my required field patterns to work using regular expressions. Additionally, I'd like to center my 'onboard' button on the page. You can find my code at this StackBlitz link: https://stackblitz.com/edit/angula ...

Is it Possible to Load Images Without Using Javascript?

When I hover over certain links on my HTML pages, large images are displayed but take a while to load. I prefer not to use JavaScript to preload the images. Are there any alternative solutions available? ...

leveraging the unique MySQL id displayed within the onclick/checkbox identifier

I am currently working on a website that displays database content and enables users to click on the content to view more information related to that specific id. I also want to include a checkbox next to each piece of content that will allow me to delete ...

Tips for efficiently delivering the create-react-app index file from your server

I have encountered a challenge in my development work with create-react-app. I am looking to serve the index.html file from the backend initially, but I am facing difficulties in achieving this goal. The main reason behind this desire is to customize the ...

Is it time to swap out those divs for tables in your email template?

I have set up my template like this and I am questioning whether I should replace every div with a table. Let's start with the first div in the example. Do I really need to create a new table element, followed by tr and td tags just for a banner? I u ...

Created a custom function that includes a specific target href parameter

I have a website that implements role-based authentication, where the application displayed is dependent on the user's role. The code for this functionality is as follows: <asp:Repeater ID="ui_rprApp" runat="server" DataSourceID="odsApp"> ...

Achieving a scrolling body with a fixed header in a Vue b-table

Currently, I have implemented a b-table element on a webpage to display data from a database. The table is paginated, but feedback suggests that users prefer all information displayed in a single scrolling view. However, the issue arises when I attempt to ...