Font Awesome Symbole in einem Kreis machen?

134

Ich verwende Font Awesome in einem Projekt, aber ich habe einige Dinge, die ich mit Font Awesome-Symbolen tun möchte. Ich kann ein Symbol wie dieses einfach aufrufen:

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

Ist es möglich, dass sich alle Symbole immer in einem runden Kreis mit Rand befinden? So etwas habe ich ein Bild:

Geben Sie hier die Bildbeschreibung ein

Verwenden von

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

Wird der Effekt, aber das Problem ist, dass die Symbole immer größer sind als der Text oder das Element daneben, irgendwelche Lösungen?

Schneider
quelle

Antworten:

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 der alten Antwort: http://fiddle.jshell.net/4LqeN/

Nico O.
quelle
6
Hast du etwas, aber keinen runden Kreis?
Schneider
Das border-radiussollte das Element abrunden. Welchen Brower benutzt du? wird meine Antwort mit Präfixen aktualisieren
Nico O
4
Dies ist jedoch keine Lösung. Dies funktioniert nur, wenn der iInhalt hat. Normalerweise haben Sie mit FA keinen Inhalt im i-Tag, aber das Symbol wird später von CSS gerendert: <i class="fa fa-lock"></i>und darum hat @Schneider tatsächlich gebeten.
Jan
@Jan werde ich morgen untersuchen. Aber ich kann kein Problem sehen. Sie haben Recht, dass die Tags keinen Inhalt haben, aber der Inhalt wird über CSS hinzugefügt. Selbst wenn das Symbol nicht geladen werden kann, wird ein Kreis angezeigt. Können Sie aus einem Problem, das Sie mit der Antwort sehen, eine jsFiddle machen?
Nico O
4
Nein, das ist die Antwort auf die Frage. Siehe die Bilder der Frage. Es gibt einen Schatten, keinen harten Kreis.
Nico O
230

Mit Font Awesome können Sie ganz einfach gestapelte Symbole wie folgt verwenden:

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

Siehe Font Awesome Stacked Icons

Update: - Geige für gestapelte Symbole

Sampat Badhe
quelle
6
Die gestapelten Symbole funktionieren nur bis zu 2x. Wenn Sie größer als das wollen, funktioniert es nicht
J Lee
15
Ich wünschte, dies wäre die akzeptierte Antwort, es ist der "richtige" Weg, dies mit fontawesome zu tun. Akzeptierte Antwort ist ein Hack, der sich nicht gut anpasst.
fragte_io
4
Gleiches gilt für Zahlen<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 - es ist die einzige Option hier, die wirklich fontawesome ist, nicht benutzerdefinierte CSS, also ist es genauer als alles hier.
fragte_io
1
Sehr elegante Lösung. @mmativ Wenn du eine Hintergrundfarbe auf dem Kreis meinst, machst du einfach <i class = "fa fa-kreisdünner fa-stack-2x" style = "color: blue"> </ i>
J.Kirk.
34

Sie brauchen keine CSS- oder HTML-Tricks dafür. Font Awesome hat eine Klasse dafür eingebaut - fa-circle Um mehrere Symbole zusammen zu stapeln, können Sie die fa-stack-Klasse für das übergeordnete div verwenden

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

// Und wir haben jetzt das Facebook-Symbol im Kreis :)

Vasyl Gutnyk
quelle
2
Sampat Badhe hat in seiner Antwort dasselbe vor mehr als 2 Jahren gesagt. Warum liest du keine anderen Antworten, bevor du deine schreibst?
Taras Yaremkiv
Hey, Entschuldigung für Sampat, ich habe ihn nicht antworten sehen. Ich werde versuchen, meine Antwort zu ändern und weitere Lösungen oder hilfreiche Informationen hinzuzufügen.
Vasyl Gutnyk
1
Es ist eine gute Lösung, aber es gibt jedem Symbol einen blauen Hintergrund. Irgendeine Arbeit herum?
Jamshaid Kamran
@CodeIt Verwenden Sie einfach CSS, um es zu löschen oder eine neue Hintergrundfarbe hinzuzufügen. Es sollte kein Problem sein.
Vasyl Gutnyk
27

Schriftsymbol in einem Kreis mit em als Basismessung

wenn Sie ems für die Messungen verwendet werden , einschließlich line-height, font-sizeund border-radiusmit text-align: centerihm die Dinge ziemlich solide macht:

#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 */
}
Dave Everitt
quelle
13

Update: Verwenden Sie lieber Flex.

Wenn Sie Präzision wünschen, ist dies der richtige Weg.

Geige. Go Play -> http://jsfiddle.net/atilkan/zxjcrhga/

Hier ist der 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>

Hier ist das 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;
}

Habe Spaß

localhoost
quelle
Hinzufügen von Textausrichtung: Mitte; Lässt es mit so ziemlich allem funktionieren, sogar mit fa-info
Marcio
Wie wäre es mit vertikaler Ausrichtung?
Localhoost
9

Sie können dies auch tun. Ich wollte einen Kreis um meine icomoon-Symbole hinzufügen. Hier ist der Code.

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

AKTUALISIEREN :

Nachdem Sie kürzlich Flex gelernt haben, gibt es einen saubereren Weg (keine Tabellen und weniger CSS). Stellen Sie den Wrapper so ein, dass die untergeordneten Elemente zentriert werden, display: flex;und geben Sie ihm die Eigenschaften align-items: center;für (vertikal) undjustify-content: center; zentriert werden, (horizontale) Zentrierung.

Siehe diese aktualisierte JS Fiddle


Seltsam, dass das vorher noch niemand vorgeschlagen hat. Ich benutze immer Tabellen, um das zu tun.
Machen Sie einfach einen Wrapper display: tableund zentrieren Sie ihn text-align: centerfür die horizontale und vertical-align: middlevertikale Ausrichtung.

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

und so etwas

.wrapper{
  display: table; 

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

}

oder sehen Sie diese JS Fiddle

nclsvh
quelle
Dies ist eine sehr schöne und saubere und kleine! Hier ist eine Geige mit CSS anstelle von SCSS jsfiddle.net/bqtkmy0s
summsel
@summsel ist das nicht genau das gleiche wie meine ursprüngliche Antwort? Sie haben den Code nur in scss und nicht in css geschrieben.
nclsvh
Ja, natürlich ist es das. Ich habe Ihre Lösung in CSS ausprobiert und es gibt viele Leute da draußen, die CSS bevorzugen. Warum also nicht die jsfiddle dieser CSS-Version posten?
Summsel
5

Dies ist der Ansatz, den Sie nicht verwenden müssen. Stellen Sie paddingeinfach das heightund widthfür das ein aund lassen Sie den flexGriff mit 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>

mmativ
quelle
4

Das folgende Beispiel hat bei mir nicht ganz funktioniert, dies ist die Version, die ich zum Laufen gebracht habe!

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;
}
Petros Kyriakou
quelle
3

Versuche dies

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

Schriftart Fantastische Symbole werden wie folgt eingefügt: Daher können Sie entweder Ihr i oder ein ähnliches stylen:

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

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

Mit diesem Code können Sie einfach ein rundes Symbol erhalten:

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

Jetzt lautet Ihr CSS:

.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;}
neuer Entwickler
quelle
0

Ich mag Dave Everitts Antwort mit der «Zeilenhöhe», aber es funktioniert nur durch Angabe der «Höhe» und dann müssen wir «! Wichtig» zur Zeilenhöhe hinzufügen ...

.cercle {
    font-size: 2em;
    width: 2em;
    height: 2em;
    text-align: center;
    line-height: 2em!important;
    background: #666;
    color: #fff;
    border-radius: 2em;
}
Oznog
quelle
Die
Zeilenhöhe
Hinzufügen !importantist ein Pflaster, keine Lösung. Dies bedeutet, dass Sie eine andere CSS-Eigenschaft an einer anderen Stelle haben, die Ihre Eigenschaft überschreibt.
TylerH
0

Dies ist die beste und präziseste Lösung, die ich bisher gefunden habe.

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;
    }
Armando Guarino
quelle