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


134

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:

entrez la description de l'image ici

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?

Réponses:


175

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 de l'ancienne réponse: http://fiddle.jshell.net/4LqeN/


6
Vous avez quelque chose, mais pas un cercle rond?
Schneider

Le border-radiusdevrait arrondir l'élément. Quel navigateur utilisez-vous? mettra à jour ma réponse avec des préfixes
Nico O

4
Mais ce n’est pas une solution. Cela ne fonctionne que si le ia du contenu. Habituellement, avec FA, vous n'avez pas de contenu dans l'i-tag, mais l'icône est rendue par CSS plus tard: <i class="fa fa-lock"></i>et c'est ce que @Schneider a réellement demandé.
janvier

@Jan je vais enquêter là-dessus demain. Mais je ne vois pas de problème. Vous avez raison, que les balises n'ont pas de contenu, mais le contenu sera ajouté via css. Même lorsque l'icône ne se chargerait pas, vous verriez un cercle. Pouvez-vous faire un jsFiddle d'un problème que vous voyez avec la réponse?
Nico O

4
Non, c'est la réponse à la question. Voir les images de la question. Il y a une ombre, pas un cercle dur.
Nico O le

230

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


6
Les icônes empilées ne fonctionnent que jusqu'à 2x. Si vous voulez plus grand que cela, cela ne fonctionne pas
J Lee

15
souhaite que ce soit la réponse acceptée, c'est la "bonne" façon de le faire avec fontawesome. La réponse acceptée est un hack qui ne s'adapte pas bien.
demandé

4
Idem avec les nombres<span class="fa-stack fa-lg"> <i class="fa fa-circle-thin fa-stack-2x"></i> <i class="fa fa-stack-1x">1</i> </span>
m3nda

2
@emrah - c'est la seule option ici qui soit vraiment géniale, pas de css personnalisé, donc c'est plus précis que n'importe quoi ici.
demandé_io

1
Solution très élégante. @mmativ si vous voulez dire une couleur d'arrière-plan sur le cercle, vous faites simplement <i class = "fa fa-circle-thin fa-stack-2x" style = "color: blue"> </i>
J.Kirk.

34

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 :)


2
Sampat Badhe a dit la même chose dans sa réponse il y a plus de 2 ans. Pourquoi ne lisez-vous pas d'autres réponses avant d'écrire la vôtre?
Taras Yaremkiv

hé, désolé pour Sampat, je ne l'ai pas vu répondre, je vais essayer de modifier ma réponse et d'ajouter plus de solutions ou d'informations utiles.
Vasyl Gutnyk

1
C'est une bonne solution, mais cela donne un fond bleu à chacune des icônes. Un travail autour?
Jamshaid Kamran

@CodeIt Utilisez simplement css pour l'effacer ou ajouter une nouvelle couleur d'arrière-plan. Ça ne devrait pas être un problème.
Vasyl Gutnyk

27

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 */
}

13

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


ajout de text-align: center; Le fait fonctionner avec à peu près tout, même fa-info
Marcio

que diriez-vous d'aligner verticalement?
localhoost

9

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

8

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 un très joli et propre et petit! Voici un violon avec CSS au lieu de SCSS jsfiddle.net/bqtkmy0s
Summsel

@summsel n'est-ce pas exactement la même chose que ma réponse originale? Vous venez d'écrire le code en scss et non en css.
nclsvh

Oui, Bien sur que c'est ça. J'ai essayé votre solution en css et il y a beaucoup de gens qui préfèrent le css. Alors pourquoi ne pas poster le jsfiddle de cette version css.
summsel

5

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>


4

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

3

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

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>

2

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

0

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

La hauteur de ligne le
résolvait

L'ajout !importantest un pansement, pas une solution. Cela signifie que vous avez une autre propriété CSS ailleurs que sur votre propriété.
TylerH

0

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;
    }
En utilisant notre site, vous reconnaissez avoir lu et compris notre politique liée aux cookies et notre politique de confidentialité.
Licensed under cc by-sa 3.0 with attribution required.