web-dev-qa-db-fra.com

Centrer les icônes FontAwesome verticalement et horizontalement

J'utilise actuellement FontAwesome et j'ai beaucoup de mal à centrer les icônes verticalement et horizontalement dans leur conteneur. J'ai essayé de le faire via le positionnement et j'ai rencontré des problèmes car la taille des icônes était différente. J'ai essentiellement l'horizontale et j'essaie d'obtenir la verticale. 

<div class='container'>
    <div class='row'>
        <div class='offset2 span6 loginContainer'>
            <div class='row'>
                <div class='login-icon'>    
                    <i class='icon-user'></i>
                </div>
                <input type="text"  placeholder="Email" />

            </div>
            <div class='row'>
                <div class='login-icon'><i class=" icon-lock "></i></div>
                <input type="password" class="" placeholder="Password" />
            </div>
        </div>
    </div>
</div>

.login-icon{
    font-size: 40px;
    line-height: 40px;
    background-color:black;
    color:white;
    width: 50px;
    height: 50px;

}
.login-icon [class*='icon-']{
  height: 50px;
  width: 50px;
  display: inline-block;
  text-align: center;
  vertical-align: baseline;
}

http://jsfiddle.net/ncapito/e2UPC/

csstwitter-bootstrapfont-awesome
35
Nix

C'est tout ce dont vous avez besoin, aucun emballage requis:

.login-icon{
    display:inline-block;
    font-size: 40px;
    line-height: 50px;
    background-color:black;
    color:white;
    width: 50px;
    height: 50px;
    text-align: center;
    vertical-align: bottom;
}

http://jsfiddle.net/e2UPC/6/

39
koala_dev

J'ai utilisé transform pour corriger le décalage. Cela fonctionne très bien avec des icônes rondes comme la bouée de sauvetage. 

<span class="fa fa-life-ring"></span>

.fa {
    transform: translateY(-4%);
}
10
Phuc Le

Alors je l’ai enfin compris ( http://jsfiddle.net/ncapito/eYtU5/ ):

.centerWrapper:before {
    content:'';
    height: 100%;
    display: inline-block;
    vertical-align: middle;
}

.center {
    display:inline-block;
    vertical-align: middle;
}

<div class='row'>
    <div class='login-icon'>
        <div class='centerWrapper'>
            <div class='center'> <i class='icon-user'></i></div>
       </div>
    </div>
    <input type="text" placeholder="Email" />
 </div>
7
Nix

Je viens d'abaisser la hauteur à 28 pixels sur le .login-icon [class * = 'icon -'] Voici le violon: http://jsfiddle.net/mZHg7/

.login-icon [class*='icon-']{
    height: 28px;
    width: 50px;
    display: inline-block;
    text-align: center;
    vertical-align: baseline;
}
1
AdamSchuld

Je viens juste de savoir comment centrer les icônes et en faire un conteneur au lieu de les mettre dans un seul.

.fas {
    position: relative;
    color: #EEE;
    font-size: 16px;
}
.fas:before {
    position: absolute;
    left: calc(50% - .5em);
    top: calc(50% - .5em);
}
.fas.fa-icon {
    width: 60px;
    height: 60px;
    color: white;
    background-color: black;
}
0
Kardaw

Si vous utilisez Twitter Bootstrap, ajoutez la classe text-center à votre code. 

<div class='login-icon'><i class="icon-lock text-center"></i></div>
0
Jeremiah Fries