it-swarm.com.de

Verwenden Sie ein fantastisches Symbol für Schriftarten als CSS-Inhalt

Ich möchte ein fantastisches Symbol für Schriftarten als CSS-Inhalt verwenden, d. H.

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

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

225
sdvnksv

Update für FontAwesome 5Dank an Aurelien

Sie müssen font-family in Font Awesome 5 Brands OR Font Awesome 5 Free ändern, basierend auf dem Typ des Symbols, das Sie rendern möchten. Vergessen Sie nicht, font-weight: 900; anzugeben.

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 Symbol und Text zu erfahren.


FontAwesome 4 und darunter

Das ist der falsche Weg, es zu benutzen. Öffnen Sie das Stylesheet "Font Awesome", wechseln Sie zu class der Schriftart, die Sie verwenden möchten, sagen Sie 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 nur sicher, dass Sie, wenn Sie ein bestimmtes a-Tag anvisieren möchten, stattdessen einen class verwenden möchten, um ihn genauer zu definieren:

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 etwas Abstand zwischen den beiden haben möchten, müssen Sie den Code display: inline-block; angeben und einen der folgenden Codecodes verwenden: padding-right:

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

Erweitern Sie diese Antwort weiter, da für viele möglicherweise ein Symbol im Hover geändert werden muss. Daher können Sie einen separaten Selektor und Regeln für die :hover-Aktion schreiben:

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

Demo

Im obigen Beispiel schiebt sich das Symbol wegen der unterschiedlichen Größe und Sie möchten dies sicherlich nicht. Daher können Sie in der Basisdeklaration ein festes width setzen

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

Demo

534
Mr. Alien

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

Kurz gesagt, können Sie 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 dann mit einem beliebigen Symbol verwenden, zum Beispiel:

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

Wenn Sie über font-awesome Zugriff auf SCSS-Dateien haben, 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;
}
18
ersefuril
a:before {
     content: "\f055";
     font-family: FontAwesome;
     left:0;
     position:absolute;
     top:0;
}

Beispiel-Link: https://codepen.io/bungeedesign/pen/XqeLQg

Den Icon-Code erhalten Sie unter: https://fontawesome.com/cheatsheet?from=io

2
Pervez

Sie können Unicode dafür in CSS 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.

1
Mahib

Die Schriftstärke sollte auf 900 eingestellt sein, 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;
}
0

Wie heißt es auf der FontAwesome-Website 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 Sie content:''; entsprechend Ihrem Unicode.

0
Prusakov

Update für Font Awesome 5 mit SCSS

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

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