CSS 疑似要素で Font Awesome 5 アイコンのフォント ファミリーを適切に設定する方法

Font Awesome 5 疑似要素の正しいフォントファミリーの選択

CSS 疑似要素内で Font Awesome アイコンを使用する場合、次のようになります。アイコンが適切に表示されるようにするには、正しいフォント ファミリを選択することが重要です。あなたが遭遇したように、間違ったフォントファミリーを使用すると、アイコンが表示されなくなる可能性があります。

Font-Family プロパティの複数のフォント

解決策は、次のことを利用することです。 font-family プロパティ内の複数のフォント。これにより、ブラウザは、一致するものが見つかるまで、指定された各フォント ファミリのアイコンを検索します。この場合、次を使用できます:

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

ソリッド アイコンと標準アイコンのフォント ファミリー

想定に反して、両方のフォント ファミリーソリッドおよび通常のアイコンは、「Font Awesome 5 Solid」ではなく「Font Awesome 5 Free」です。実線のアイコンと通常のアイコンの違いは、フォント ファミリーではなくフォントの太さにあります。

無料アイコンと PRO アイコン

また、すべてが標準であるわけではないことにもお気づきでしょう。アイコンは無料です。一部は Font Awesome の PRO パッケージに含まれています。したがって、アイコンが表示されない場合は、無料プランで利用できるかどうかを再確認してください。

サンプル コード

正しい使用方法を説明するために、次の例を考えてみましょう。

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

以上がCSS 疑似要素で Font Awesome 5 アイコンのフォント ファミリーを適切に設定する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。