Font Awesome 5 auf Pseudo-Elementen zeigt ein Quadrat anstelle eines Symbols

Lesezeit: 4 Minuten

Font Awesome 5 auf Pseudo Elementen zeigt ein Quadrat anstelle eines
nsager

Ich versuche, den Inhalt von a zu ändern span mit einem Font Awesome-Symbol direkt von der CSS-Seite, aber es scheint nicht richtig zu funktionieren.

1) Ich habe FA aus der Dokumentation importiert und in die <head>

<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.0.9/css/all.css" integrity="sha384-5SOiIsAziJl6AWe0HWRKTXlfcSHKmYV4RBF18PPJ173Kzn7jzMyFuTtk8JA7QQG1" crossorigin="anonymous">

2) Mein HTML sieht so aus:

<span class="myClass">Movies</span>

3) Nehmen wir nun an, ich möchte den Inhalt des Bereichs mit einem Symbol direkt von der CSS-Seite ändern.

Mein CSS sieht derzeit so aus, aber es funktioniert nicht, es gibt mir ein Quadrat anstelle des Symbols.

.myClass {
  font-size:25px;
}

.myClass::after {
  font-family: 'Font Awesome 5 Free';
  content: '\f008';
}
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.0.9/css/all.css">
<span class="myClass"></span>

Das Lustige ist, dass es so aussieht, als würde es mit einigen Symbolen funktionieren. Wenn ich mit teste content: '\f007'; Es klappt. Irgendeine Idee warum?

(Und wenn Sie sich fragen, warum ich das Symbol direkt im CSS ändern möchte, liegt es daran, dass ich Medienabfragen verwende, sodass ich es nicht direkt in die HTML-Seite einfügen kann.)

  • welcher Symbolcode ist das?

    – Temani Afif

    10. April 2018 um 13:28 Uhr

  • @TemaniAfif das ist eine Filmikone

    – Nsager

    10. April 2018 um 13:28 Uhr

  • Können Sie den Link innerhalb der Fontawesome-Site teilen … damit wir überprüfen, zu welchem ​​​​Paket es gehört

    – Temani Afif

    10. April 2018 um 13:29 Uhr

  • Er tat es in seinem ersten eingebetteten Abschnitt.

    – roberrrt-s

    10. April 2018 um 13:30 Uhr

  • @Roberrrt ich meinte den Link des Icons 😉 nicht die Font Awesome lib

    – Temani Afif

    10. April 2018 um 13:31 Uhr

Font Awesome 5 auf Pseudo Elementen zeigt ein Quadrat anstelle eines
Temani Afif

Wenn Sie die verwenden JS+SVG-Version Lesen Sie dies: Font Awesome 5 zeigt ein leeres Quadrat, wenn Sie die JS + SVG-Version verwenden

Sie müssen hinzufügen

font-weight:900

.myClass {
  font-size:45px;
}

.myClass::after {
  font-family: 'Font Awesome 5 Free';
  content: "\f008";
  font-weight: 900;
}
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.13.0/css/all.css">
<span class="myClass"></span>

Die regular Version des Symbols, die standardmäßig definiert ist font-weight, ist PRO, also wird ein leeres Quadrat angezeigt. Was Sie brauchen, ist die solid Ausführung:

https://fontawesome.com/icons/film?style=solid

CSS Fontawesome 5 Pseudonym-Element Schriftstärke

Warum funktioniert das andere Symbol?

Weil die \f007 ist dieses Symbol: https://fontawesome.com/icons/user?style=regular und wie Sie sehen können, die regular one ist nicht PRO und ist im kostenlosen Paket enthalten, sodass Sie a nicht angeben müssen font-weight. Sie müssen es nur angeben, wenn Sie die anzeigen möchten solid Ausführung.

.myClass::after {
  font-family: 'Font Awesome 5 Free';
  content: "\f007";
  visibility: visible;
  font-weight: 900;
}

.myClass-1::after {
  font-family: 'Font Awesome 5 Free';
  content: "\f007";
  visibility: visible;
}
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.12.0/css/all.css">
<span class="myClass">Solid </span>
<br>
<span class="myClass-1">Regular </span>

Als Randnotiz, alle light und duotone -Versionen sind im Pro-Paket enthalten, sodass immer ein leeres Quadrat angezeigt wird font-weight benutzt


Sie können die Dokumentation für weitere Details überprüfen: https://fontawesome.com/how-to-use/on-the-web/advanced/css-pseudo-elements

Font Awesome 5 - Pseudoelement


Verwandte Fragen

Font Awesome 5 zeigt ein leeres Quadrat, wenn die JS+SVG-Version verwendet wird

Schriftart Awesome 5 Unicode

Font Awesome 5, warum werden CSS-Inhalte nicht angezeigt?

  • Super, danke für die Erklärung! Weißt du, was font-weight Ich müsste verwenden, wenn die light Version wäre kostenlos gewesen?

    – Nsager

    10. April 2018 um 13:47 Uhr

  • @nsayer alle light Symbole sind PRO, daher gibt es im kostenlosen Paket keine Schriftstärke für sie 😉 Sie können sie nur verwenden, wenn Sie die PRO-Version erhalten

    – Temani Afif

    10. April 2018 um 13:50 Uhr


  • @nsayer für ein helleres Rendering können Sie Textstrich versuchen, siehe Antwort unten zum Testen;)

    – G-Cyrillus

    12. November 2021 um 19:56 Uhr

aus deinem kommentar:

Super, danke für die Erklärung! Wissen Sie, welche Schriftstärke ich verwenden müsste, wenn die Light-Version kostenlos gewesen wäre?

Prüfung text-stroke mit einer transparenten Farbe, um einen dünneren Render zu erhalten:

.myClass {
  font-size: 45px;
}

.myClass::after {
  font-family: 'Font Awesome 5 Free';
  content: "\f008";
  font-weight: 900;
  -webkit-text-stroke;
  transparent 0.2em;
}

.myClass+.myClass::after {
  -webkit-text-stroke: white 0.02em;
}

.bis {
  font-size: 4rem;
  color: blue
}
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.13.0/css/all.css">
<span class="myClass"></span>
<span class="myClass"></span>
<span class="myClass bis "></span>
<u>
<span class="myClass bis "></span></u>

list-style-image: url("../../media/examples/rocket.svg");

Quelle: https://developer.mozilla.org/en-US/docs/Web/CSS/list-style-image

914770cookie-checkFont Awesome 5 auf Pseudo-Elementen zeigt ein Quadrat anstelle eines Symbols

This website is using cookies to improve the user-friendliness. You agree by using the website further.

Privacy policy