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

Question 1

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.)

Question 2

^{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

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

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?

Question 3

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>

Question 4

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

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