Verwenden Sie das Font Awesome-Symbol als CSS-Inhalt

278

Ich möchte ein Font Awesome-Symbol als CSS-Inhalt verwenden, dh

a:before {
    content: "<i class='fa...'>...</i>";
}

Ich weiß, dass ich keinen HTML-Code verwenden kann. Sind contentalso nur noch Bilder übrig?

sdvnksv
quelle
Aus dem Speicher können Sie mit dem Inhaltsattribut kein HTML in das DOM einfügen. Einfach nur alter Text.
Mike Causer

Antworten:

633

Update für FontAwesome 5 Danke an Aurelien

Sie müssen das font-familyin Font Awesome 5 BrandsODER ändern Font Awesome 5 Free, basierend auf der Art des Symbols, das Sie rendern möchten. Vergessen Sie auch nicht zu deklarierenfont-weight: 900;

a:before {
   font-family: "Font Awesome 5 Free";
   content: "\f095";
   display: inline-block;
   padding-right: 3px;
   vertical-align: middle;
   font-weight: 900;
}

Demo

Sie können den Rest der Antwort unten lesen, um zu verstehen, wie es funktioniert, und um einige Problemumgehungen für den Abstand zwischen dem Symbol und dem Text zu kennen.


FontAwesome 4 und darunter

Das ist der falsche Weg, es zu benutzen. Öffnen Sie das fantastische Stylesheet für Schriftarten, wechseln Sie beispielsweise zu der classSchriftart, die Sie verwenden möchten fa-phone, kopieren Sie die Inhaltseigenschaft unter dieser Klasse mit der Entität und verwenden Sie sie wie folgt:

a:before {
    font-family: FontAwesome;
    content: "\f095";
}

Demo

Stellen Sie einfach sicher, dass Sie, wenn Sie auf ein bestimmtes aTag abzielen möchten, classstattdessen ein verwenden sollten, um es spezifischer zu gestalten:

a.class_name:before {
    font-family: FontAwesome;
    content: "\f095";
}

Wenn Sie den obigen Weg verwenden, wird das Symbol mit dem verbleibenden Text von Ihnen verbunden. Wenn Sie also ein wenig Platz zwischen den beiden haben möchten, machen Sie es display: inline-block;und verwenden Sie einige padding-right:

a:before {
    font-family: FontAwesome;
    content: "\f095";
    display: inline-block;
    padding-right: 3px;
    vertical-align: middle;
}

Erweitern Sie diese Antwort weiter, da viele möglicherweise ein Symbol beim Schweben ändern müssen. Daher können wir einen separaten Selektor und :hoverAktionsregeln schreiben :

a:hover:before {
    content: "\f099"; /* Code of the icon you want to change on hover */
}

Demo

Im obigen Beispiel werden die Symbole aufgrund der unterschiedlichen Größe verschoben, und das möchten Sie sicherlich nicht. Sie können also eine feste widthBasisdeklaration wie festlegen

a:before {
    /* Other properties here, look in the above code snippets */
    width: 12px; /* add some desired width here to prevent nudge */
}

Demo

Mr. Alien
quelle
Damit font-family: FontAwesome;ändert sich auch die Schriftart für Ankertags. Wie können wir damit umgehen?
Shubh
@ Shubh lesen Sie den Code sorgfältig, font-familywird angenommen, auf :beforePseudo und nicht Anker-Tag aufgerufen zu werden
Mr. Alien
Ich dachte nur, ich würde hier hinzufügen, dass Sie die Unicode-Spezifikation für ein bestimmtes Symbol finden können, ohne in die Quelle graben zu müssen. Gehen Sie einfach zur Liste der Symbole auf der Website von font awesome und klicken Sie auf das gewünschte Symbol. Sie sehen den Unicode-Wert auf der Seite direkt unter den Beispielen des Symbols: fortawesome.github.io/Font-Awesome/icon/pencil-square-o
Allen Underwood
Diese CSS-Unicode-Liste für FontAwesome ist besser: astronautweb.co/snippet/font-awesome, da sie die richtigen contentCodes für das direkte Kopieren anzeigt (dh ein Kinderspiel). PS: Ich frage mich immer noch, warum die FontAwesome-Jungs die Inhaltscodes nicht auf jede Symbolseite setzen?!
Kai Noack
25

Eine weitere Lösung, ohne dass Sie manuell mit den Unicode-Zeichen herumspielen müssen, finden Sie unter Making Font Awesome awesome - Verwenden von Symbolen ohne i-Tags ( Haftungsausschluss: Ich habe diesen Artikel geschrieben ).

Kurz gesagt, Sie können eine neue Klasse wie folgt erstellen:

.icon::before {
    display: inline-block;
    margin-right: .5em;
    font: normal normal normal 14px/1 FontAwesome;
    font-size: inherit;
    text-rendering: auto;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    transform: translate(0, 0);
}

Und verwenden Sie es dann mit einem beliebigen Symbol, zum Beispiel:

<a class="icon fa-car" href="#">This is a link</a>
Dustinmoris
quelle
23

Wenn Sie von font-awesome aus auf SCSS-Dateien zugreifen können, können Sie diese einfache Lösung verwenden:

.a:after {
    // Import mixin from font-awesome/scss/mixins.scss
    @include fa-icon();

    // Use icon variable from font-awesome/scss/variables.scss
    content: $fa-var-exclamation-triangle;
}
ersefuril
quelle
3

Hierfür können Sie in CSS Unicode verwenden. Wenn Sie font awesome 5 verwenden, ist dies die Syntax.

.login::before {
    font-family: "Font Awesome 5 Free"; 
    font-weight: 900; 
    content: "\f007";  
}

Sie können ihre Dokumentation hier sehen .

Mahib
quelle
3

Sie sollten die Schriftgröße auf 900 einstellen, damit die Schriftfamilie Font Awesome 5 Free funktioniert.

Dies ist die Arbeit:

.css-selector::before {
   font-family: 'Font Awesome 5 Free';
   content: "\f101";
   font-weight: 900;
}

quelle
1

Wie es auf der FontAwesome-Website heißt FontAwesome =>

HTML:

<span class="icon login"></span> Login</li>

CSS:

 .icon::before {
    display: inline-block;
    font-style: normal;
    font-variant: normal;
    text-rendering: auto;
    -webkit-font-smoothing: antialiased;
  }

    .login::before {
        font-family: "Font Awesome 5 Free";
        font-weight: 900;
        content: "\f007";
   }

In .login::before-> bearbeiten content:'';, um Ihrem Unicode zu entsprechen.

Prusakov
quelle
1

Update für Font Awesome 5 mit SCSS

.icon {
  @extend %fa-icon;
  @extend .fas;

  &:before {
    content: fa-content($fa-var-user);
  }
}
Freundlicher Code
quelle
0

Hier ist meine Webpack 4 + Font Awesome 5-Lösung:

Webpack Plugin:

new CopyWebpackPlugin([
    { from: 'node_modules/font-awesome/fonts', to: 'font-awesome' }
  ]),

globaler CSS-Stil:

@font-face {
    font-family: 'FontAwesome';
    src: url('/font-awesome/fontawesome-webfont.eot');
    src: url('/font-awesome/fontawesome-webfont.eot?#iefix') format('embedded-opentype'),
    url('/font-awesome/fontawesome-webfont.woff2') format('woff2'),
    url('/font-awesome/fontawesome-webfont.woff') format('woff'),
    url('/font-awesome/fontawesome-webfont.ttf') format('truetype'),
    url('/font-awesome/fontawesome-webfont.svgfontawesomeregular') format('svg');
    font-weight: normal;
    font-style: normal;
}

i {
    font-family: "FontAwesome";
}
setec
quelle