WordPressWebサイトで素晴らしいFontを使用する方法
公開: 2019-02-14ベクターアイコンを使用するか静止画像を使用するかを選択できる場合は、ベクターを使用することをお勧めします。 それらは小さくてロードが速く、解像度を失うことなく任意のサイズに拡張できます。 Font Awesomeは、Webサイトで使用できるベクターアイコンの優れたライブラリであり、必要な形状やブランドはほぼすべて揃っています。 そして何よりも？ それは無料です。 何よりも、それは簡単です。
私たちのYoutubeチャンネルを購読する
Font AwesomeWordPressアイコン
WordPressサイトでFontAwesomeライブラリを使用するのは比較的簡単です。 これらの簡単な手順に従うと、ページの読み込み時間を短縮し、作業の一部としてこれらのアイコンを使用して、非常にクリーンで鮮明なデザインを作成できるようになります。
覚えておくべきことの1つは、（ほとんどの場合）FontAwesomeアイコンが実際のフォントとしてサイトに配信されることです。 そのため、FontAwesomeという名前が付けられました。 @ font-faceとFontAwesome font-familyを介してCSSを使用すると、通常のフォント文字と同じようにスタイルを設定して操作できます。
そのため、個々のブラウザやビューポートのサイズや間隔について心配する必要はありません。 それが素晴らしいと思えば、それはそうだからです。 そして、これがあなたがそれをする方法です：
FontAwesomeのインストール
Font Awesomeを手動でインストールして使用する方法はありますが、WordPressユーザーにとってはより良い方法があります。 FAの優秀な人々は、公式のFont Awesome WordPressプラグインをリリースしており、それは美しく機能します。
プラグインをインストールしてアクティブ化すると、[[アイコン名]]ショートコードとHTMLスニペットにアクセスできるようになります。 便利でダンディなFAアイコンリストを保持している限り、必要なアイコンを正確に把握できます。 プラグインの設定ページ（ [設定]-[Font Awesome]の下にあります）で、デフォルトでどのように設定されているかがわかります。 一般に、これらは保持して使用するのに問題はありません。 ほとんどの人は他に何も必要ありません。
方法オプションは、おそらくほとんどの人にとって最も重要です。 WebfontとSVGを切り替えることができます。 SVGはより多くのパワーと機能（パワートランスフォームやマスキングなど）を提供しますが、Font Awesome CDNはアイコンをフォントとしてではなく、SVGファイルとして配信します。 それはいくつかの点で優れていますが、SVGは多くのブラウザーで認識されておらず、WordPressが常にSVG画像でうまく機能するとは限りません。 したがって、Webフォントバージョンで安全にプレイすることをお勧めします。
Font Awesomeもそうです。違いがわからない場合、またはSVGを使用する必要がある理由がわからない場合は、デフォルトのWebfontメソッドを使用するのがおそらく最も簡単です。
WordPressサイトでFontAwesomeアイコンを使用するには、簡単です。 アイコンを表示したい場所に<iclass =” fab fa-wordpress”> </ i>を追加するだけです。 必ずアイコンライブラリをチェックして、どの名前を入力するかを確認してください。
注：プラグインのショートコードはヒットアンドミスです。 一部のアイコンは完全にうまくレンダリングされますが、他のアイコンは空白で表示されます。 ショートコードが機能することがわかっていない限り、HTMLの挿入に固執することをお勧めします。 上記のWordPressの例がレンダリングされないのに、カメラアイコンがレンダリングされる例については、以下を参照してください。
これで完了です。 Font Awesome WordPressプラグインは、テーマやファイルにアクセスして、他の方法で必要なコードを挿入することに抵抗がある人に最適です。 ただし、それが問題ない場合は、次の手順に従って、サイトにFontAwesomeアイコンを表示できます。
FontAwesomeアイコンを手動でインストールする
最初に行う必要があるのは、Font AwesomeWebサイトにアクセスすることです。 そこから、[無料で使用を開始]ボタンをクリックします。 トラフィックの多いサイトを持ち、エンタープライズソリューションを必要としている人々のために有料プランを提供していますが、一般の人々は無料バージョンで逃げることができます。 あなたは無料で1,500のアイコンを手に入れ、Proプランでは5,000以上のバリエーションを手に入れます。
次のステップは、単にコピー/貼り付けすることです。 ただし、前に説明したように、Webフォントオプションが強調表示されていることを確認する必要があります。
ほとんどのテーマには、サイトの<head>にコードを自動的に挿入する場所があります。 たとえば、Diviの場合、[テーマオプション-統合]に移動し、このコードを[ブログの先頭にコードを追加]というラベルの付いたフィールドに貼り付けます。
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.1/css/all.css" integrity="sha384-fnmOCqbTlWIlj8LyTjo7mOUStjsKC4pOpQbqyi7RrhN7udi9RwhKkMHpvLbHG9Sr" crossorigin="anonymous">
保存を押すと、上記と同じように、必要なアイコンを含めることができます。 ただ、これを行うことによってショートコードにアクセスすることはできません。
テーマがコード統合をサポートしていない場合
テーマにこのような場所が見つからない場合は、手動で行うのも同じくらい簡単です。 そのためには、テーマのコアファイルを掘り下げる必要がありますが、これは非常に迅速なコピー/貼り付けであり、（一般的に）かなり安全です。 WPダッシュボードの[外観–エディター]に移動し、 header.phpファイルを見つけます。
</ head>が書かれている行を見つけ、その前にFontAwesomeから同じコードを貼り付ける必要があります。 [ファイルの更新]を押すと、FAアイコンの使用をすぐに開始できます。 繰り返しますが、この方法でFont Awesomeをインストールしても、ショートコードは取得されません。
また、テーマファイルを編集するときは常に、子テーマを使用する必要があることに注意してください。 そうすることで、テーマが更新されたときに行った変更が上書きされないようにします。
インストールのためのより多くのオプション
また、Font Awesomeについて他のより具体的なニーズがある場合は、ライブラリにアクセスするためのさまざまな方法が提供されます。 NPMとYarnのインストールから、SketchとReactの統合まで、WordPress以外に必要な場合は、豊富なオプションがあります。
フォントの素晴らしいアイコンのスタイリング
それらをインストールしたので、アイコンをポップにする時が来ました。 各アイコンはCSSクラスによって管理されているため、CSSを使用してこれを行うことができます。 最もよく使用される2つのスタイルは、色とサイズです。 CSSスタイルをスタイルシートに含めることも、インラインで行うこともできます。 一般に、このようなアイコンはサイト全体で普遍的ではない傾向があるため、インラインスタイルを使用することをお勧めします。
Font Awesome Webサイトには、これを行う方法の例があります。 イグルーアイコンと、特定のサイズのfa-xs 、 fa-xl 、 fa-2xなどの追加クラスを使用してサイズを表示します。
さらに、アイコンを特定のサイズに対して相対的なものにする必要があり、絶対値が機能しない場合は、アイコンを独自の<div>に配置して、制約内で機能させることができます。
<div style="font-size: 0.5rem;"> <i class="fas fa-igloo fa-10x"></i> </div>
まとめ
以上です！ すごいですよね？ Font Awesome WordPressプラグインを使用している場合でも、コードを手動で挿入している場合でも、サイトを稼働させるのに数ステップしかかかりません。 Font Awesomeはある理由で人気があり、その一部は使いやすさから来ています。 だから、そこに出て、素晴らしくなりましょう！
Font Awesomeアイコンを使用するためのお気に入りの方法は何ですか？
FontAwesomeの好意による記事特集画像