Font Awesome Icon问题：在悬停时它会获得额外的空间

Question

这是下面的代码。我尽力了。请看看。 HTML和CSS都添加了。如何在锚标记中制作圆形的fontawesome图标以及下面的文本在悬停时变大。我正在为html添加标记。

CSS

<IfModule mod_rewrite.c>

RewriteEngine on        
Options +FollowSymLinks

#Redirect non-www urls to www

RewriteCond %{HTTP_HOST} !^www\.mindscopeproducts\.com$
RewriteRule ^(.*)$ http://www.mindscopeproducts.com/$1 [R,L]

RewriteRule .* - [E=HTTP_AUTHORIZATION:%{HTTP:Authorization}]
RewriteCond %{REQUEST_URI} !^/(media|skin|js)/
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteCond %{REQUEST_FILENAME} !-l
RewriteRule ^(.*)$ index.php/$1 [L]  
</IfModule>

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

Answer 1

您需要为<i>尝试

添加行高

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>