CODEWITHSUNDEEP
htmlcss
UserX
UserX

Reputation: 1337

Trying to put my icon font above my link to have the same effect Im having with my icon images

Im doing a menu using icons(images) above my menu links.

But now Im trying to use icon-fonts from 'Font-Awesome' library instead of icon images.

But I am not able to get the icon-font above my link, to have exactly the same effect Im having with my image icons.

Like in this image below, in my "NEWS" and "LOGOUT" links Im using my home image as icon above my links, and in my "USERS" link Im using my icon font that is not above my link.

Do you see some way to have the same effect with icon fonts like Im having with icon images?

enter image description here

I have here all my code: http://jsfiddle.net/r58Ht/

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

Upvotes: 0

Views: 258

Answers (3)

Smeegs
Smeegs

Reputation: 9224

Just put a line break between the icon and the label

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

http://jsfiddle.net/r58Ht/5/

Upvotes: 1

Ming
Ming

Reputation: 4588

You can just set the <i> the icon is inside to display: block;

http://jsfiddle.net/r58Ht/3/

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

Upvotes: 1

BuddhistBeast
BuddhistBeast

Reputation: 2670

You can position it absolutely and then move it via margins. As demonstrated below with the following CSS code that I added to your fiddle:

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

Which can be seen here

Upvotes: 2

Related Questions