STORK19の購入ページはこちら

FontAwesome5のアイコンショートコードの使い方

アイコンショートコードを利用すれば、Font Awesome5のアイコンを記事内で使うことができます。

アイコンショートコードはバージョン1.3からの機能です。

Font Awesomeでアイコンを選択する

使いたいアイコンを選ぶ

まずはIconsから使いたいアイコンを選んでクリックしてください。(無料で使えるのはFreeのアイコンになります)

アイコンのタグをコピーしてメモしておく

アイコン詳細ページに記載されているアイコンタグ<i class...></i>をコピーしてください。(タグをクリックするだけでコピーできます!)

コピーしたものを、メモ帳などのテキストエディタに貼り付けてメモしておきましょう。そして、以下のようにコードを変更します。

<i class="fas fa-file-alt"></i>

上記のコードを以下のようにショートコード化します。

[icon class="fas fa-file-alt"]

黄色の箇所が変わった箇所です。

[icon class="fas fa-file-alt"]を記事内の好きな箇所に貼り付ければアイコンが表示されます。
こんな感じに→

ボタンブロックに使う例
実際の表示例

アイコンの色を変更する場合は、文字色を変更するのと同じ要領で、インラインテキストの色を変更するだけです。

[icon class="fas fa-file-alt"] [icon class="fas fa-file-alt"] [icon class="fas fa-file-alt"]

  
↑ 見やすくするために実際より大きく表示しています。

【応用編】便利な使い方

アイコンの左右にスペースを作る

アイコンタグとテキストの間に半角スペースを入れるのが一番簡単なのですが、Font Awesome専用のクラス名を入力する方法もあります。

アイコンタグの中にfa-fwというクラスを追加することで、アイコンの前後に少し余白が作ることができます。※これはFontAwesomeに用意されている機能です。

[icon class="fas fa-file-alt fa-fw"]
fa-fwなしの例

fa-fw付きの例

アイコンを大きくする

デフォルトのアイコン表示サイズが小さいと感じる場合は、classの中にfa-lgを追加することで大きくすることができます。※これはFontAwesomeに用意されている機能です。

[icon class="fas fa-file-alt fa-lg"]
ショートコード表示例
ノーマル:[icon class="fas fa-file-alt"]
fa-lg追加:[icon class="fas fa-file-alt fa-lg"]
fa-2x追加:[icon class="fas fa-file-alt fa-2x"]
fa-3x追加:[icon class="fas fa-file-alt fa-3x"]

CTAを設置しよう!

ここにリンクさせたい自分の商品やアフィリエイトリンクなどを表示させることが可能です。記事下のCTAは収益化においてかなり重要となるので効果的に使いたいところです。タグを追加してあげれば画像なども表示させることが可能!簡単にサイトの収益化の仕組みを導入することができます。

ABOUT US

サブテキストがはいります!
ライターのプロフィールが入ります。このライター情報を入れたくない場合は管理画面の ユーザー > あなたのプロフィールの「プロフィール情報」を未入力にすれば表示されません。逆に「プロフィール情報」を入力することでライター情報を表示できます。