Créer des icônes Font Awesome dans un cercle?

J'utilise font awesome sur certains projets mais j'ai certaines choses que je veux faire avec des icônes font awesome, je peux facilement appeler une icône comme celle-ci:

<i class="fa fa-lock"></i>

Est-il possible que toutes les icônes soient toujours en cercle rond avec bordure? Quelque chose comme ça, j'ai une photo:

En utilisant

i {
  background-color: white;
  border-radius: 50%;
  border: 1x solid grey;
  padding: 10px;
}

Cela fera-t-il l'effet, mais le problème est que les icônes sont toujours plus grandes que le texte ou l'élément à côté, des solutions?

Avec Font Awesome, vous pouvez facilement utiliser des icônes empilées comme celle-ci:

<span class="fa-stack fa-2x">
  <i class="fas fa-circle-thin fa-stack-2x"></i>
  <i class="fas fa-lock fa-stack-1x fa-inverse"></i>
</span>

référer Font Awesome Stacked Icons

Mise à jour: - Violon pour les icônes empilées

Vous n'avez pas besoin d'astuces css ou html pour cela. Font Awesome a construit une classe pour cela - fa-circle Pour empiler plusieurs icônes ensemble, vous pouvez utiliser la classe fa-stack sur le div parent

<span class="fa-stack fa-lg">
  <i class="fa fa-circle fa-stack-2x"></i>
  <i class="fa fa-flag fa-stack-1x fa-inverse"></i>
</span> 

// Et nous avons maintenant l'icône facebook à l'intérieur du cercle :)

Icône de police dans un cercle en utilisant emcomme mesure de base

si vous utilisez ems pour les mesures, y compris line-height, font-sizeet border-radius, avec text-align: centercela rend les choses assez solides:

#info i {
  font-size: 1.6em;
  width: 1.6em;
  text-align: center;
  line-height: 1.6em;
  background: #666;
  color: #fff;
  border-radius: 0.8em; /* or 50% width & line-height */
}

Mettre à jour: utilisez plutôt flex.

Si vous voulez de la précision, c'est la voie à suivre.

Violon. Allez jouer -> http://jsfiddle.net/atilkan/zxjcrhga/

Voici le HTML

<div class="sosial-links">
    <a href="#"><i class="fa fa-facebook fa-lg"></i></a>
    <a href="#"><i class="fa fa-twitter fa-lg"></i></a>
    <a href="#"><i class="fa fa-google-plus fa-lg"></i></a>
    <a href="#"><i class="fa fa-pinterest fa-lg"></i></a>
</div>

Voici le CSS

.sosial-links a{
    display: block;
    float: left;
    width: 36px;
    height: 36px;
    border: 2px solid #909090;
    border-radius: 20px;
    margin-right: 7px; /*space between*/

} 
.sosial-links a i{
    padding: 12px 11px;
    font-size: 20px;
    color: #909090;
}

S'amuser

Vous pouvez également le faire. Je voulais ajouter un cercle autour de mes icônes icomoon. Voici le code.

span {
font-size: 54px;
border-radius: 50%;
border: 10px solid rgb(205, 209, 215);
padding: 30px;
}

MISE À JOUR :

Lors de l'apprentissage de flex récemment, il existe un moyen plus propre (pas de tables et moins de css). Définissez le wrapper comme display: flex;et pour centrer ses enfants, donnez-lui les propriétés align-items: center;de justify-content: center;centrage (vertical) et (horizontal).

Voir ce JS Fiddle mis à jour

Etrange que personne n'ait suggéré cela avant .. J'utilise toujours des tableaux pour faire cela.
Faites simplement un emballage display: tableet centrez-le à l'intérieur avec text-align: centerpour l' vertical-align: middlealignement horizontal et vertical.

<div class='wrapper'>
  <i class='icon fa fa-bars'></i>
</div>

et des sass comme ça

.wrapper{
  display: table; 

  i{
    display: table-cell;
    vertical-align: middle;
    text-align: center;
  }

}

ou voir ce JS Fiddle

C'est l'approche que vous n'avez pas besoin d'utiliser padding, définissez simplement heightet widthpour le aet laissez la flexpoignée avec margin: 0 auto.

.social-links a{
  text-align:center;
	float: left;
	width: 36px;
	height: 36px;
	border: 2px solid #909090;
	border-radius: 100%;
	margin-right: 7px; /*space between*/
    display: flex;
    align-items: flex-start;
    transition: all 0.4s;
    -webkit-transition: all 0.4s;
} 
.social-links a i{
	font-size: 20px;
    align-self:center;
	color: #909090;
    transition: all 0.4s;
    -webkit-transition: all 0.4s;
    margin: 0 auto;
}
.social-links a i::before{
  display:inline-block;
  text-decoration:none;
}
.social-links a:hover{
  background: rgba(0,0,0,0.2);
}
.social-links a:hover i{
  color:#fff;
}

<link href="http://maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet"/>

<div class="social-links">
    <a href="#"><i class="fa fa-facebook fa-lg"></i></a>
    <a href="#"><i class="fa fa-twitter fa-lg"></i></a>
    <a href="#"><i class="fa fa-google-plus fa-lg"></i></a>
    <a href="#"><i class="fa fa-pinterest fa-lg"></i></a>
</div>

L'exemple ci-dessous n'a pas vraiment fonctionné pour moi, c'est la version que j'ai faite fonctionner!

HTML:

<div class="social-links">
    <a href="#"><i class="fa fa-facebook fa-lg"></i></a>
    <a href="#"><i class="fa fa-twitter fa-lg"></i></a>
    <a href="#"><i class="fa fa-google-plus fa-lg"></i></a>
    <a href="#"><i class="fa fa-pinterest fa-lg"></i></a>
</div>

CSS:

.social-links {
    text-align:center;
}

.social-links a{
    display: inline-block;
    width:50px;
    height: 50px;
    border: 2px solid #909090;
    border-radius: 50px;
    margin-right: 15px;

}
.social-links a i{
    padding: 18px 11px;
    font-size: 20px;
    color: #909090;
}

essaye ça

HTML:

<div class="icon-2x-circle"><i class="fa fa-check fa-2x"></i></div>

CSS:

i {
    width: 30px;
    height: 30px;
}

.icon-2x-circle {
    text-align: center;
    padding: 3px;
    display: inline-block;
    -moz-border-radius: 100px;
    -webkit-border-radius: 100px;
    border-radius: 100px;
    -moz-box-shadow: 0px 0px 2px #888;
    -webkit-box-shadow: 0px 0px 2px #888;
    box-shadow: 0px 0px 2px #888;
}

Les icônes Font Awesome sont insérées comme un: avant. Par conséquent, vous pouvez styliser votre i ou un similaire ainsi:

.i {
   background: #fff;
   border-radius: 50%;
   display: inline-block;
   height: 20px;   
   width: 20px;
}

<a href="#"><i class="fa fa-facebook fa-lg"></i></a>

Vous pouvez simplement obtenir une icône ronde en utilisant ce code:

<a class="facebook-share-button social-icons" href="#" target="_blank">
    <i class="fab fa-facebook socialicons"></i>
</a>

Maintenant, votre CSS sera:

.social-icons {
display: inline-block;border-radius: 25px;box-shadow: 0px 0px 2px #888;
padding: 0.5em;
background: #0D47A1;
font-size: 20px;
}
.socialicons{color: white;}

J'aime la réponse de Dave Everitt avec la «hauteur de ligne» mais cela ne fonctionne qu'en spécifiant la «hauteur» et ensuite il faut ajouter «! Important» à la hauteur de ligne ...

.cercle {
    font-size: 2em;
    width: 2em;
    height: 2em;
    text-align: center;
    line-height: 2em!important;
    background: #666;
    color: #fff;
    border-radius: 2em;
}

C'est la solution la meilleure et la plus précise que j'ai trouvée jusqu'à présent.

CSS:

.social .fa {
      margin-right: 1rem;
      border: 2px #fff solid;
      border-radius: 50%;
      height: 20px;
      width: 20px;
      line-height: 20px;
      text-align: center;
      padding: 0.5rem;
    }