So fügen Sie eigene Symbole in der Bootstrap-Navigationsleiste hinzu
4 Antworten
Dies ist eine Möglichkeit, ohne zusätzliches Markup hinzuzufügen, obwohl Sie jedem Anker-Link eindeutige Klassen hinzufügen müssen.
CSS:
%Vor%Sie können das Ergebnis hier anzeigen: Ссылка
Sie müssen mit den Rändern und dem Padding herumspielen. Außerdem ist dies nicht perfekt, da Sie wahrscheinlich relative Größen statt Pixel verwenden sollten.
Sie können entweder font awesome oder die Bootstrap-Symbole verwenden. Füge einfach so etwas vor dem Text für ein Glyphon ein:
%Vor%Oder das für font awesome
%Vor%Oder Sie können Ihre Bildsymbole erstellen und CSS-Klassen für Ihre Symbole erstellen.
Ok @TrevorOrr Antwort für Bootstrap-Standard-Glyphen, aber vergiss nicht, <span> -Tag innerhalb des <a> -Tags zu hüllen. Beispiel:
Wenn Sie <span> nicht in den Anker einfügen, wird das Symbol nicht angezeigt.
Ich hatte ein ähnliches Problem, aber die hier gewählte Lösung hat nicht funktioniert. Ich musste die zwei Antworten zusammen mischen, damit es funktioniert, das heißt, Hintergrundattribute auf ein <span class="icone icone-custom pull-right"> anwenden, das in <a> verschachtelt ist. Kein Code%.
Tags und Links html css twitter-bootstrap icons navbar