このページで: [隠れる]
Font Awesome for WordPressは、ウェブサイトの所有者がデザイン要素を追加するために一般的に使用する人気のアイコンセットです。. 非常に使いやすく、便利なアイコンがいくつか含まれているため、頻繁に使用されます. ただし、使用時に問題が発生する場合があります—アイコンが表示されない場合. 私たちの記事は、WordPressの所有者がFontAwesomeの問題を修正するのに役立ちます.
WordPressのFontAwesomeアイコンとは何ですか
FontAwesomeはベクトルアイコンの人気のあるコレクションです, 人気のあるコンテンツ管理システムやウェブサイト開発者ツールキットに簡単に含めることができるソーシャルメディア画像やその他のデザイン資産. これには、一般的に使用されるすべてのカテゴリの要素を含むいくつかのセットが含まれています.
現時点では FontAwesomeの現在のバージョンは 5.12.1 で構成されています 1,557 アイコン 無料版で. あります 追加する有料版 7,722 追加のアイコン. と呼ばれる有料版の一部として Font Awesome Pro ウェブサイトの所有者は、 デュオトーンテーマ —アイコンはプロジェクトの基本色を継承するか、カスタム値を入力して色付けされます.
個々のアイコンとシンボルは、厳格なガイドラインと基準に従って設計されています. Font Awesomeアイコンは、直接挿入することも、サイズの場所を指定してカスタマイズすることもできます, スタイルと回転, アニメーションと一緒に. 挿入されたアイコンは、Webブラウザのアクセシビリティモードとも互換性があるため、正しくレンダリングされます.
FontAwesomeが基本的なチェックを表示しない
挿入されたFontAwesomeアイコンが表示されない基本的な理由はいくつかあります。. いつも セットの最新バージョンが使用されていることを確認してください —SVGバージョンとCSSバージョンの両方の手順はFAの公式サイトにあります. FontAwesomeのアイコンとシンボルはどちらかリンクできます, カスタムサーバーから提供されるか、コンテンツ配信ネットワークを介して配信されます (CDN). サイト所有者は、実装のタイプに応じて最新のコードを設定する必要があります.
HTMLページに挿入すると、コードが公式の標準に準拠していない場合、アイコンセットが表示されない場合があります。サイトの所有者は、 公式のW3Cマークアップバリデーター. WordPress固有の問題は、さまざまなデザイン関連の拡張機能がインストールされている場合です. 古いバージョンでは、互換性のないFont Awesomeバージョンが呼び出されたり、アイコンセットの適切な読み込みがブロックされたりする場合があります. これは、挿入されたアイコンタグの個々のプロパティをオーバーライドするさまざまなJavaScriptまたはカスタムCSSライブラリにも拡張されます.
いくつかあります クライアント側の問題 Font Awesomeアイコンがロードされていないときに疑われる可能性があります—アドブロック拡張機能, プラグイン, ウイルス対策プログラムなど. それらの構成には、適切な表示を妨げるブラックリストに素晴らしいフォントやその他のデザインアセットが含まれる場合があります.
あることを覚えておいてください 公式のFontAwesomeプラグイン アセットを特定のサイトに統合するのが非常に簡単になる利用可能.
FontAwesomeコードの修正
上記の方法のいずれも機能しない場合に実装できるいくつかの簡単なコード修正があります. サイト所有者はする必要があります あることを確認してください 2 利用可能なクラス HTMLコードで—最初のものは fa クラスと2つ目は、目的のアイコンのタイプを識別するクラスです。. 例は次のとおりです:
<i class = "fa fa-search"></私>
CSSコードへのリンクを投稿する場合、管理者は正しいリンク構造が使用されていることを確認する必要があります, サンプルコードは次のとおりです:
リンクhref="http://maxcdn.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css
試行できるグローバルフォントの素晴らしい修正は、WordPressのフッターセクションにFontAwesomeコードを含めることです。:
<?php wp_footer(); ?>
<リンクhref="https://opensource.keycdn.com/fontawesome/4.7.0/font-awesome.min.css" rel = "stylesheet">
</体>