私の Font Awesome 5 アイコンが CSS コンテンツで正しく表示されないのはなぜですか?

Font Awesome 5: CSS コンテンツの問題を理解する

Font Awesome アイコンを CSS コンテンツに統合しようとすると、ユーザーは次のような一般的な問題に遭遇することがあります。実際のアイコンの代わりにアイコンのコードが表示されます。この問題は、対処する必要があるいくつかの重要な側面により発生します。

まず、Font Awesome 5 CSS ファイルが正しく含まれていることを確認してください。これを行うには、head タグにリンクを追加します:

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

または、CSS ファイル内にインポートできます:

@import url("https://use.fontawesome.com/releases/v5.13.0/css/all.css")

次に、次のことが重要です。フォントファミリーとコンテンツの設定を修正してください。あなたの例では、フォントファミリーは「FontAwesome」ではなく「Font Awesome 5 Free」である必要があります。さらに、次のようにコードの前にバックスラッシュ () を使用する必要があります。

.fp-prev:before {
    color:#000;
    content: '\f35a'; /* Use \ before the code */
    font-family: "Font Awesome 5 Free";
    font-style: normal;
    font-weight: normal;
    font-size:40px;
}

これらの修正を適用すると、CSS コンテンツにコードが表示されるのではなく、目的のアイコンが表示されるようになります。 .

以上が私の Font Awesome 5 アイコンが CSS コンテンツで正しく表示されないのはなぜですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。