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:
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?
css
font-awesome
Schneider
quelle
quelle
border-radius
sollte das Element abrunden. Welchen Brower benutzt du? wird meine Antwort mit Präfixen aktualisiereni
Inhalt 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.Mit Font Awesome können Sie ganz einfach gestapelte Symbole wie folgt verwenden:
Siehe Font Awesome Stacked Icons
Update: - Geige für gestapelte Symbole
quelle
<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>
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
// Und wir haben jetzt das Facebook-Symbol im Kreis :)
quelle
Schriftsymbol in einem Kreis mit
em
als Basismessungwenn Sie ems für die Messungen verwendet werden , einschließlich
line-height
,font-size
undborder-radius
mittext-align: center
ihm die Dinge ziemlich solide macht:quelle
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
Hier ist das CSS
Habe Spaß
quelle
Sie können dies auch tun. Ich wollte einen Kreis um meine icomoon-Symbole hinzufügen. Hier ist der Code.
quelle
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 Eigenschaftenalign-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: table
und zentrieren Sie ihntext-align: center
für die horizontale undvertical-align: middle
vertikale Ausrichtung.und so etwas
oder sehen Sie diese JS Fiddle
quelle
Dies ist der Ansatz, den Sie nicht verwenden müssen. Stellen Sie
padding
einfach dasheight
undwidth
für das eina
und lassen Sie denflex
Griff mitmargin: 0 auto
.quelle
Das folgende Beispiel hat bei mir nicht ganz funktioniert, dies ist die Version, die ich zum Laufen gebracht habe!
HTML:
CSS:
quelle
Versuche dies
HTML:
CSS:
quelle
Schriftart Fantastische Symbole werden wie folgt eingefügt: Daher können Sie entweder Ihr i oder ein ähnliches stylen:
quelle
Mit diesem Code können Sie einfach ein rundes Symbol erhalten:
Jetzt lautet Ihr CSS:
quelle
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 ...
quelle
!important
ist ein Pflaster, keine Lösung. Dies bedeutet, dass Sie eine andere CSS-Eigenschaft an einer anderen Stelle haben, die Ihre Eigenschaft überschreibt.Dies ist die beste und präziseste Lösung, die ich bisher gefunden habe.
CSS:
quelle