CODEWITHSUNDEEP
htmlcss
Shuvo Habib
Shuvo Habib

Reputation: 2125

Font Awesome Icon Issue : on Hover it's getting extra space belo

This is the code below. I tried my best .Please have a look. Both HTML and CSS is added. How to make a circular fontawesome icon along with text below both in anchor tag become large on hover. I 'm adding a markup for the html.

CSS

.navicon {
	    margin: 0 auto;
	    z-index: 999;
	}

    em.icon-text{
	    line-height: normal;
	    font-style: normal;
	}
    a.icon{
    	text-decoration: none;
    }
   .exp{
	    width:80px;
	    height:80px;
	    background-color:red;
	    border-radius:100%;
	    line-height:80px;
	    text-align:center;
	    vertical-align:middle;
	    display: block;
	    margin: 0 auto 0;
	    
	    z-index: 999;
	    transition:.3s;
	}
	 .exp:hover{
	 	position: relative;
	 	
	 	width:120px;
	 	height:120px;
	 	line-height:120px;
	 	transition:.3s;
	 	text-decoration: none;
	 	font-size: 25px;
	}
	.fa-camera-retro{
		line-height: inherit;
	}
Here is my html code:

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css" rel="stylesheet"/>
    <div class="navicon">
        <a href="#" class="exp">
            <i class="fa fa-camera-retro fa-3x"></i>
            <em class="icon-text text-center">Creative</em>
        </a>
    </div>

Upvotes: 1

Views: 252

Answers (1)

NullPoiиteя
NullPoiиteя

Reputation: 57332

you need to add line height to the <i> try

line-height: 80px;
vertical-align:middle;


.navicon {
	    margin: 0 auto;
	    z-index: 999;
	}

    em.icon-text{
	    line-height: normal;
	    font-style: normal;
	}
    a.icon{
    	text-decoration: none;
    }
   .exp{
	    width:80px;
	    height:80px;
	    background-color:red;
	    border-radius:100%;
	    line-height:80px;
	    text-align:center;
	    vertical-align:middle;
	    display: block;
	    margin: 0 auto 0;
	    
	    z-index: 999;
	    transition:.3s;
	}
	 .exp:hover{
	 	position: relative;
	 	
	 	width:120px;
	 	height:120px;
	 	line-height:120px;
	 	transition:.3s;
	 	text-decoration: none;
	 	font-size: 25px;
	}
	.fa-camera-retro{
		line-height: inherit;
	}

   i{
     line-height:80px;
     vertical-align:middle;
   }
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css" rel="stylesheet"/>
<div class="navicon">
    <a href="#" class="exp">
        <i class="fa fa-camera-retro fa-3x"></i>
        <em class="icon-text text-center">Creative</em>
    </a>
</div>

Upvotes: 3

Related Questions