Bagaimana untuk Menetapkan Fon-Family dengan betul untuk 5 Ikon Font Hebat dalam elemen Pseudo CSS?

Memilih Fon-Family yang Betul untuk Font Hebat 5 Pseudo-Elements

Dalam menggunakan ikon Font Awesome dalam CSS pseudo-elemen, ia adalah penting untuk memilih keluarga fon yang betul untuk memastikan ikon dipaparkan dengan betul. Seperti yang anda temui, penggunaan font-family yang salah boleh menyebabkan ikon tidak muncul.

Fon Berbilang dalam Font-Family Property

Penyelesaian terletak pada penggunaan berbilang fon dalam harta fon-keluarga. Dengan berbuat demikian, penyemak imbas akan mencari ikon dalam setiap keluarga fon yang ditentukan sehingga ia menemui padanan. Dalam kes ini, anda boleh menggunakan:

font-family: "Font Awesome 5 Brands", "Font Awesome 5 Free";

Font-Family for Solid and Regular Icons

Bertentangan dengan apa yang anda anggap, font-family untuk kedua-duanya ikon pepejal dan biasa ialah "Font Awesome 5 Free," bukan "Font Awesome 5 Solid." Perbezaan antara ikon pepejal dan biasa terletak pada berat fonnya, bukan keluarga fonnya.

Ikon Percuma lwn. PRO

Anda juga perasan bahawa bukan semua ikon biasa ikon adalah percuma. Sesetengahnya disertakan dalam pakej PRO Font Awesome. Oleh itu, jika ikon tidak dipaparkan, semak semula ketersediaannya di bawah pelan Percuma.

Kod Contoh

Untuk menggambarkan penggunaan yang betul, pertimbangkan contoh berikut:

.icon {
  display: inline-block;
  font-style: normal;
  font-variant: normal;
  text-rendering: auto;
  -webkit-font-smoothing: antialiased;
}

.icon1:before {
  content: "\f099"; /* TWITTER ICON */
  font-weight: 400;
}

.icon2:before {
  content: "\f095"; /* PHONE ICON */
  font-weight: 900;
}

.icon3:before {
  content: "\f095"; /* PHONE ICON */
  font-weight: 400;/*This one will not work because the regular version of the phone icon is in the Pro Package*/
}

<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.11.0/css/all.css">

<div class="icon1 icon"></div>
<div class="icon2 icon"></div>
<br>

<div class="icon3 icon"></div>

Atas ialah kandungan terperinci Bagaimana untuk Menetapkan Fon-Family dengan betul untuk 5 Ikon Font Hebat dalam elemen Pseudo CSS?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!