WordPressにFontAwesomeアイコンを追加する方法–完全ガイド

公開: 2017-07-04

それがこのガイドのすべてです。 読み終えると、次の方法が正確にわかります。

  • FontAwesomeスタイルシートをWordPressに手動で追加します
  • 無料のプラグインでWordPressにFontAwesomeを追加
  • さまざまな方法でFontAwesomeアイコンを挿入してスタイルを設定する

掘り下げましょう…

コンテンツ

  • 1WordPressにFontAwesomeアイコンを追加するのに時間をかける必要がある理由
  • 2WordPressにFontAwesomeアイコンを手動で追加する方法
    • 2.1ステップ1：WordPressテーマにFontAwesomeスタイルシートをエンキューする
    • 2.2ステップ2：FontAwesomeアイコンを挿入する
  • 3プラグインを使用してWordPressにFontAwesomeアイコンを追加する方法
    • 3.1ステップ1：プラグインをインストールしてアクティブ化する
    • 3.2ステップ2：FontAwesomeアイコンを挿入する
  • 4フォントの素晴らしいアイコンのスタイルを設定してサイズを変更する方法
    • 4.1FontAwesomeアイコンのサイズを変更する
    • 4.2フォントの素晴らしいアイコンを回転させる
    • 4.3FontAwesomeアイコンにアニメーションを追加する
    • 4.4フォントの素晴らしいアイコンの色を変更する
  • 5まとめ
    • 5.1関連記事

WordPressにFontAwesomeアイコンを追加するのに時間をかける必要がある理由

Font Awesomeアイコンは、その名前が示すように、画像ではなくアイコンフォントであるため、すばらしいものです。 つまり、次のようなクールなことができます。

  • アイコンはベクトルであるため、品質を損なうことなくサイズを変更できます
  • 色の変更、アニメーションの追加、およびその他のCSS操作の使用

言うまでもなく、Font Awesomeアイコンは、静止画像を使用するよりもはるかに優れています。

まず、それらをサイトに追加する2つの異なる方法を紹介します。 次に、アイコンのスタイルと操作方法を説明します（どの方法を選択しても）。

FontAwesomeアイコンをWordPressに手動で追加する方法

テーマのコードを掘り下げることを考えると怖い場合は、次のセクションに進んで、無料のプラグインを使用してFontAwesomeアイコンをWordPressに追加する方法を説明することをお勧めします。

それ以外の場合は、FontAwesomeを起動して実行するための優れた軽量の方法としてこのメ​​ソッドが好きです。

基本的に、あなたがする必要があるのは、WordPressテーマにFontAwesomeスタイルシートを追加することだけです。 次に、Font Awesomeアイコンの挿入を開始し、好きなようにスタイルを設定できます。

プロセス全体がどのように機能するかを段階的に説明します。

ステップ1：WordPressテーマにFontAwesomeスタイルシートをエンキューする

私が言ったように、あなたの最初のステップはあなたのWordPressテーマにFontAwesomeCSSスタイルシートを追加することです。 これはFontAwesomeWebサイトから直接入手できますが、私の推奨する方法は、BootstrapCDNでホストされているバージョンを使用することです。

現在、そのリンクは次のとおりです。

https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css

ただし、FontAwesomeが新しいバージョンをリリースすると変更されます。 したがって、リンクを半定期的に最新バージョンに更新することをお勧めします（ただし、古いバージョンは引き続き機能します）。

このスタイルシートをWordPressに追加するには、子テーマのfunctions.phpファイルにスタイルシートをエンキューする必要があります。 CSSを追加する基本的な方法はヘッダーにリンクを配置することですが、スタイルシートをヘッダーに直接配置するのではなく、特別なWordPressエンキュー関数を使用することをお勧めします。

さらに、子テーマを使用すると、テーマをアップグレードする必要が生じた場合に変更が上書きされないようになります。

WordPressコードのベストプラクティスに従うことは良いことなので、子テーマとエンキュー機能の両方を使用することを強くお勧めします。

わかりました、これがそれを行う方法です：

[外観]→[エディター]に移動し、子テーマのfunctions.phpファイルを選択します。

次に、次のコードを貼り付けます。

add_action( 'wp_enqueue_scripts', 'enqueue_load_fa' );
function enqueue_load_fa() {
wp_enqueue_style( 'load-fa', 'https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css' );
}

FontAwesomeをWordPressに追加

必ず変更を保存してください。これで完了です。 それほど苦痛ではありませんよね？

ステップ2：FontAwesomeアイコンを挿入する

スタイルシートをエンキューしたら、Font Awesomeアイコン検索に移動し、挿入するアイコンを見つけることで、FontAwesomeアイコンをサイトに挿入できます。

アイコンをクリックすると、FontAwesomeはアイコンを使用するために必要なコードを提供します。

あなたがする必要があるのはあなたのサイトにアイコンを追加するためにWordPressエディターのテキストタブにそのコードを置くことです。

以上です！ これで、WordPressにFontAwesomeのサポートが正常に追加されました。 あとは、WordPressサイトでFontAwesomeアイコンのスタイルを設定する方法を学ぶだけです。

ただし、その前に、FontAwesomeSupportを追加するためのプラグインメソッドについて説明します。 プラグイン方式よりも手動方式を使用した場合は、スキップしてください。

プラグインを使用してWordPressにFontAwesomeアイコンを追加する方法

Font Awesomeスタイルシートを手動でエンキューする代わりにプラグインを使用したい場合は、WordPress.orgにBetterFontAwesomeと呼ばれる無料のオプションがリストされています。

常に最新のスタイルシートをサイトに追加することに加えて、BetterFontAwesomeは次のことも行います。

  • ショートコードを使用してFontAwesomeアイコンを埋め込むことができます。
  • TinyMCEエディターにアイコンを挿入するためのドロップダウンメニューが表示されます。

Font Awesomeアイコンを定期的に使用することを計画している場合は、これら2つのツールを使用すると作業が楽になる可能性があります。 ただし、使用頻度が低い場合は、手動による方法が最も軽量であるため、最も簡単なオプションだと思います。

ステップ1：プラグインをインストールしてアクティブ化する

Font Awesomeを追加するには、プラグインをインストールしてアクティブ化するだけです。 本当に他には何もありません。

[設定]→[BetterFontAwesome]に移動してアクセスできる基本設定パネルがありますが、すべてをデフォルトのままにしておくことは完全に自由です。

ステップ2：FontAwesomeアイコンを挿入する

プラグインでFontAwesomeアイコンを挿入するには、2つの異なるオプションがあります。

  • 前のセクションで示したように、FontAwesomeのWebサイトのコードを使用します。
  • ドロップダウンから生成できるショートコードを使用します。

前のセクションで最初の方法をすでに示したので、ドロップダウンショートコードジェネレーターについて簡単に説明します。

新しい投稿またはページを作成すると、[メディアの追加]ボタンの横に新しい[アイコンの挿入]ボタンが表示されます。 それをクリックすると、利用可能なすべてのFont Awesomeアイコンと、結果をフィルタリングするオプションが表示されます。

選択したアイコンをクリックするだけで、プラグインが適切なショートコードを挿入します。

WordPressにFontAwesomeアイコンを追加する

そして、それがすべてです！

Font Awesomeアイコンがサポートされたので、FontAwesomeアイコンのスタイルを設定して操作する方法をいくつか掘り下げてみましょう。

FontAwesomeアイコンのスタイルを設定してサイズを変更する方法

Font AwesomeをWordPressに追加するために使用した方法に関係なく、同じ基本原則を使用してアイコンのスタイルを設定します。

さらに、これらのコマンドは、ショートコードを使用している場合でも、FontAwesomeのサイトの埋め込みコードを使用している場合でも機能します。

これらのヒントのほとんどは、Font Awesomeの例のページから直接引用されているため、互換性について心配する必要はありません。

FontAwesomeアイコンのサイズを変更する

基本的なものから始めましょう–FontAwesomeアイコンのサイズを大きくします。 デフォルトでは、アイコンはかなり小さいので、これは間違いなく遭遇する可能性のある状況です。

アイコンのサイズを大きくするには、次のいずれかの修飾子を使用できます。

  • fa-lg –サイズが33％増加します
  • fa-2x –サイズを2倍にします
  • fa-3x –トリプルサイズ
  • fa-4x –…
  • fa-5x –…

これらの修飾子を使用するには、コードのアイコンの名前の後に（ただし、引用符の中に）、ショートコードのクラスの引用符の中にそれを追加するだけです。 両方の埋め込み方法でアイコンのサイズを3倍にする例を次に示します。

  • <i class =” fa fa-download fa-3x ” aria-hidden =” true”> </ i>
  • [icon name =” download” class =” fa-3x “]

たとえば、これは次のとおりです。

フロントエンドでこれになります：

FontAwesomeアイコンを回転させる

Font Awesomeアイコンを簡単に回転させて、向きを変えることもできます。

回転の修飾子は次のとおりです。 上記のサイズ修飾子とまったく同じように、これらのいずれかを使用できます。

  • fa-rotate-90 –90度回転します
  • fa-rotate-180 –180度回転します
  • fa-rotate-270 –270度回転します
  • fa-flip-horizo​​ntal –アイコンを水平軸に沿って反転します
  • fa-flip-vertical –アイコンを垂直軸に沿って反転します

FontAwesomeアイコンにアニメーションを追加する

アイコンにいくつかの基本的なアニメーションを追加することもできます。 Font Awesomeには、回転を追加するための2つの異なる修飾子があります。

  • fa-spin –スムーズな回転を追加します
  • fa-pulse –アイコンを8つの異なるステップで回転させます

これらのアニメーションは、円形のアイコンと組み合わせるのが最適です。 他の奇妙な形のアイコンを使用すると、効果が少し奇妙に見える場合があります。

FontAwesomeアイコンの色を変更する

最後に、FontAwesomeアイコンの色を変更する方法を紹介します。 残念ながら、これには組み込みの修飾子はありません。 代わりに、カスタムCSSを使用する必要があります。

ただし、心配しないでください。非常に簡単です。

必要なのはこの小さなコードだけです：

.fa-NAME {
color: COLOR;
}

ここで、fa-NAMEはアイコンの実際の名前であり、COLORはアイコンを変更する色です。

前の例のダウンロードアイコンを使い続けるために、これを赤に変える方法は次のとおりです。

[外観]→[カスタマイザー]→[追加のCSS]に移動すると、カスタムCSSを簡単に追加できます。

まとめ

Font Awesomeアイコンは、設定に数分かかる場合があります。 しかし、それらをインストールすると、それらは永久に存在します。 それ以降、個々のFont Awesomeアイコンを挿入してスタイルを設定するために必要なのは、上記の手順に従うことだけです。

注意してください–手動の方法を使用する場合は、定期的にアクセスしてスタイルシートへのリンクを更新し、最新バージョンに遅れないようにする必要があります。