Verwenden Sie das Font Awesome-Symbol als CSS-Inhalt

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?

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

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>

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

a:before {
     content: "\f055";
     font-family: FontAwesome;
     left:0;
     position:absolute;
     top:0;
}

Beispiellink: https://codepen.io/bungeedesign/pen/XqeLQg

Den Symbolcode erhalten Sie unter: https://fontawesome.com/cheatsheet?from=io

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 .

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

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.

Update für Font Awesome 5 mit SCSS

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

  &:before {
    content: fa-content($fa-var-user);
  }
}

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