web-dev-qa-db-fra.com

Faire des icônes Font Awesome dans un cercle?

J'utilise une police géniale sur certains projets, mais j'ai certaines choses que je veux faire avec des icônes géniales de police, je peux facilement appeler une icône comme celle-ci.

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

Est-il possible de tout icône toujours être en cercle rond avec bordure, quelque chose comme ça j'ai une photo

enter image description here

En utilisant 

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

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

cssfont-awesome
99
Schneider

i.fa {
  display: inline-block;
  border-radius: 60px;
  box-shadow: 0px 0px 2px #888;
  padding: 0.5em 0.6em;

}
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" />
<i class="fa fa-wrench"></i>

JsFiddle of old answer: http://fiddle.jshell.net/4LqeN/

130
Nico O

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

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

se référer Icônes superposées Font Awesome

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

196
Sampat Badhe

Vous n'avez pas besoin de trucs css ou html pour cela . Font Awesome a construit en classe pour cela - fa-stack 

<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 dans le cercle :)

26
Vasyl Gutnyk

si vous utilisez ems pour les mesures, y compris line-height, font-size et border-radius, avec text-align: center, les choses sont plutôt 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 */
}
24
Dave Everitt

Mise à 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

10
atilkan

Vous pouvez aussi faire ça. 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;
}
8
Ian Blair

C'est l'approche que vous n'avez pas besoin d'utiliser padding, définissez simplement height et width pour a et laissez le flex gérer 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>

4
mmativ

METTRE &AGRAVE; JOUR:

En apprenant flex récemment, il existe une méthode plus propre (pas de tables et moins de CSS). Définissez le wrapper sur display: flex; et, pour centrer ses enfants, attribuez-lui les propriétés align-items: center; pour le centrage (vertical) et justify-content: center; (horizontal). 

Voir ceci mis à jour JS Fiddle

Étrange que personne n'ait suggéré cela auparavant .. J'utilise toujours des tableaux pour le faire.
Créez simplement un wrapper avec display: table et au centre de celui-ci avec text-align: center pour horizontal et vertical-align: middle pour un alignement vertical.

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

et certains sass comme ça 

.wrapper{
  display: table; 

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

}

ou voir ceci JS Fiddle

4
nclsvh

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;
}
2
MaxineHu

L'exemple ci-dessous n'a pas 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;
}
2
Petros Kyriakou

J'aime la réponse de Dave Everitt avec la "hauteur de ligne", mais cela ne fonctionne qu'en spécifiant la "hauteur", puis nous devons 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;
}
1
Oznog

Les icônes Font Awesome sont insérées sous la forme: avant. Par conséquent, vous pouvez appeler soit votre i ou a like 

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

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

Vous pouvez simplement contourner l'icône en utilisant ce code:

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

Maintenant, votre CSS sera:

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