it-swarm.com.de

fontawesome 5 font-family funktioniert nicht

Ich habe fontawesome 5 in ein Projekt mit bootstrap 4 integriert. Wenn ich eine Schrift über css abrufe, funktioniert sie nicht .. _. Mit fontawesome 4 war der Code wie folgt:

#mainNav .navbar-collapse .navbar-sidenav .nav-link-collapse:after {
float: right;
content: '\f107';
font-family: 'FontAwesome'; }

Ich habe versucht, den Namen der Schriftart zu ändern, aber es funktioniert nicht

font-family: 'Font Awesome 5 Free'
28
Carmelo Valenti

Ihre Unicode ist falsch f107

a::after {
  content: "\f007";
  font-family: 'Font Awesome\ 5 Free';
}
<link href="https://use.fontawesome.com/releases/v5.0.1/css/all.css" rel="stylesheet">
<a>User</a>
<i class="fas fa-shopping-basket"></i>

In anderen Fällen wird font-weight: 900; Sie retten. Einige Icons in Font Awesome 5 funktionieren nicht ohne font-weight: 900;.

a::after {
  content: "\f007";
  font-family: 'Font Awesome\ 5 Free';
  font-weight: 900;
}
79
Pedram

Seltsamerweise müssen Sie das ' font-weight: 900 ' in einige Icons einfügen, damit sie angezeigt werden.

#mainNav .navbar-collapse .navbar-sidenav .nav-link-collapse:after {
  content: '\f107';
  font-family: 'Font Awesome\ 5 Free'; 
  font-weight: 900; /* Fix version 5.0.9 */
}
54
Lenin Zapata

Das Problem liegt im font-weight.
Für Font Awesome 5 müssen Sie {font-weight:900} verwenden.

10
www.admin.ge

Verwenden der Datei fontawesome-all.css: Durch das Ändern der "Brands" -Schriftfamilie von "Font Awesome 5 Free" in "Font Awesome 5 Brands" wurden die Probleme behoben, die ich hatte. 

Ich kann nicht das ganze Guthaben annehmen - ich habe mein eigenes lokales Problem behoben, bevor ich mir die CDN-Version angesehen habe: https://use.fontawesome.com/releases/v5.0.6/css/all.css

Sie haben die Ausgabe auch auf dem CDN geregelt.

 @font-face {
    font-family: 'Font Awesome 5 Brands';
    font-style: normal;
    font-weight: normal;
    src: url("../webfonts/fa-brands-400.eot");
    src: url("../webfonts/fa-brands-400.eot?#iefix") format("embedded-opentype"), url("../webfonts/fa-brands-400.woff2") format("woff2"), url("../webfonts/fa-brands-400.woff") format("woff"), url("../webfonts/fa-brands-400.ttf") format("truetype"), url("../webfonts/fa-brands-400.svg#fontawesome") format("svg"); }

    .fab {
    font-family: 'Font Awesome 5 Brands'; }
    @font-face {
    font-family: 'Font Awesome 5 Brands';
    font-style: normal;
    font-weight: 400;
    src: url("../webfonts/fa-regular-400.eot");
  src: url("../webfonts/fa-regular-400.eot?#iefix") format("embedded-opentype"), url("../webfonts/fa-regular-400.woff2") format("woff2"), url("../webfonts/fa-regular-400.woff") format("woff"), url("../webfonts/fa-regular-400.ttf") format("truetype"), url("../webfonts/fa-regular-400.svg#fontawesome") format("svg"); }

6
JTStuedle

Seit FontAwesome 5 müssen Sie eine neue Option "searchPseudoElements" aktivieren, um FontAwesome-Symbole auf diese Weise verwenden zu können: 

<script>
  window.FontAwesomeConfig = {
    searchPseudoElements: true
  }
</script>

Siehe auch diese Frage: Font awesome 5 über Pseudo-Elemente und die neue Font Awesome-API: https://fontawesome.com/how-to-use/font-awesome-api

Ändern Sie außerdem die Schriftfamilie in Ihrem CSS-Code in 

font-family: "Font Awesome 5 Regular";
3
Mesa

Ein Gewicht von 900 ist keine Seltsamkeit, sondern eine von FontAwesome hinzugefügte absichtliche Einschränkung (da sie den gleichen Unicode, aber nur eine andere Schriftart haben), so dass Sie sich nicht mit den 'festen' und 'hellen' Symbolen beschäftigen müssen welche nur in der kostenpflichtigen 'Pro'-Version verfügbar sind.

3
user3006765

Ich wollte nicht die 'all'-Version verwenden, also suchte die' fontawesome-all.min.css'-Datei (die zuvor in der Kopfzeile enthalten war) nach 'family' -Tag und fand am Ende eine Deklaration @font-face{font-family:**Font Awesome\ 5 Free**;font-style:normal;.

Also, im Stylesheet für ein Element, bei dem ich dencontent: "\f0c8";code verwenden wollte, habe ich font-family: Font Awesome\ 5 Free; hinzugefügt (oder geändert) und es hat funktioniert.

.frb input[type="checkbox"] ~ label:before {
    font-family: Font Awesome\ 5 Free;
    content: "\f0c8";
    font-weight: 900;
    position: absolute;
}
2
WojCup

Seltsamerweise müssen Sie die Schriftfamilie und die Schriftbreite angeben, damit dies funktioniert. Folgendes hat bei mir funktioniert:

.second-section-header::after {
    content: "\f259";
    font-family: 'Font Awesome\ 5 Free';
    font-weight: 900;
}

Von dort aus können Sie beliebige Stile hinzufügen.

Sagen wir:

.second-section-header::after {
    content: "\f259";
    font-family: 'Font Awesome\ 5 Free';
    font-weight: 900;
    font-size: 100px;
    color: white;
    z-index: 1;
    position: absolute;
}

Ich hoffe das hilft.

1

das geht wohl um preismodell ...;)

https://fontawesome.com/how-to-use/on-the-web/referencing-icons/basic-use

Solid    Free           fas   <i class="fas fa-camera"></i> 
Regular  Pro Required   far   <i class="far fa-camera"></i> 
Light    Pro Required   fal   <i class="fal fa-camera"></i> 
Brands   Free           fab   <i class="fab fa-font-awesome"></i>

Ich habe eine Lösung gefunden.

  • fontawesome-all.css integrieren
  • Am Ende der Datei Suchen Sie das zweite @ font-face und ersetzen Sie es

    schriftfamilie: 'Font Awesome 5 Free';

Mit

font-family: 'Font Awesome 5 FreeR';

Und ersetzen Sie:

.far {
  font-family: 'Font Awesome 5 Free';
  font-weight: 400; }

Mit

.far {
  font-family: 'Font Awesome 5 FreeR';
  font-weight: 400; }
0
Carmelo Valenti

npm i --save @ fortawesome/fontawesome-free

Meine Sccs:

@import "[email protected]/fontawesome-free/scss/fontawesome";
@import "[email protected]/fontawesome-free/scss/brands";
@import "[email protected]/fontawesome-free/scss/regular";
@import "[email protected]/fontawesome-free/scss/solid";
@import "[email protected]/fontawesome-free/scss/v4-shims";

Es hat gut für mich funktioniert!

0
Tan Nguyen

die Lösung nennt sich wie normale Schrift:

@font-face {
font-family: "Font Awesome 5 Free-Regular-400";
src: url(../fonts/Font%20Awesome%205%20Free-Regular-400.otf) format("opentype");}
0
Menzezzz

Wenn Sie SVG mit JavaScript verwenden, müssen Sie dies aktivieren, da es standardmäßig deaktiviert ist. Benutzen 

<script data-search-pseudo-elements ... > 

in Ihrem Skript-Tag.

0
Juri