【WordPress】アイコンを記事内に挿入する方法【Font Awesome】

今回は、WordPressで記事内にアイコンを挿入する簡単な方法を解説していきます。

【WordPress】アイコンを記事内に挿入する方法【Font Awesome】

WordPressでアイコンを記事内に挿入するには、Font Awesomeを使うのがおすすめです。

Font Awesomeは、無料でいろいろなアイコンを使用できるWEBサービスです。

アイコンの挿入も簡単にできるので、今回はFont Awesomeのアイコンを記事内に挿入していきます。

具体的な手順は、下記の通りです。

1. Font AwesomeのcssをWordPressに読み込ませる
2. Font Awesomeのサイトでアイコンのコードを取得する
3. コードをテキストエディタに貼り付ける

詳しく解説していきます。

Font AwesomeのcssをWordPressに読み込ませる

アイコンを表示させるには、Font AwesomeのcssをWordPressに読み込ませる必要があります。

といってもやることは簡単で、下記コードを「functions.php」に追記するだけです。

function simple_enqueue_style() {
 wp_enqueue_style( 'fontawesome-style', 'https://use.fontawesome.com/releases/v5.6.3/css/all.css' );
}
add_action( 'wp_enqueue_scripts', 'simple_enqueue_style' );

Font Awesomeのサイトでアイコンのコードを取得する

これでアイコンを表示できる状態になったので、Font Awesomeのサイトにアクセスして、アイコンのコードを取得します。

取得したコードをテキストエディタに貼り付ける

コードを取得したら、それをテキストエディタに貼り付けるだけでアイコンを挿入できます。

アイコンが表示されているのがわかると思います。

アイコンのサイズも変更できる

Font Awesomeでは、アイコンのサイズも簡単に変更することができます。

<i class="far fa-ad"></i> → 通常の大きさ
<i class="far fa-ad fa-xs"></i> → fa-xsを追加すると0.75倍の大きさになる
<i class="far fa-ad fa-lg"></i> → fa-lgで1.33倍
<i class="far fa-ad fa-2x"></i> → fa-2xで2倍
<i class="far fa-ad fa-3x"></i> → fa-3xで3倍
<i class="far fa-ad fa-4x"></i> → fa-4xで5倍
<i class="far fa-ad fa-5x"></i> → fa-5xで7倍