SWELLで「Font Awesome」のアイコンを使う方法

2019 6/08
SWELLで「Font Awesome」のアイコンを使う方法
記事上のウィジェットエリア

このページでは、WordPressテーマ「SWELL」で「Font Awesome」のアイコンを使う方法について解説していきます。

目次前広告表示エリア
目次

Font Awesomeを読み込む

まずはFont AwesomeのCSSを読み込みましょう。

「外観」>「カスタマイズ」>「高度な設定」メニューを開くと、以下のようなテキストエリアがあります。

headタグ内に出力するコード

このテキストエリアに、以下のコードを入力します。

<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.1/css/all.css">
こんな感じ
FontAwesomeの読み込み

CSSファイルの最新版の情報については、Font Awesome公式ページでご確認下さい。

特定のページにだけFont Awesomeを読み込み込む方法

上記の方法だと、全ページでFont Awesomeが読み込まれた状態になりますが、特定のページでだけFont Awesomeを読み込むということも可能です。

SWELLでは投稿編集ページの下部に『【SWELL】カスタムCSS』という入力エリアがあり、そのページにだけ適用されるCSSを記述することができるようになっています。

このカスタムCSSに、Font Awesomeを読み込むための以下のコードを記述すればOKです。

@import url("https://use.fontawesome.com/releases/v5.8.1/css/all.css");

実際の画面では以下のようになります。

カスタムCSSでFont Awesomeを読み込む
カスタムCSSでFont Awesomeを読み込む

使いたいアイコンを選ぶ

Font Awesomeのアイコン検索ページから、使用したいアイコンを見つけましょう。

Font Awesomeアイコン検索ページ
Font Awesomeアイコン検索ページ

使いたいアイコンが決まったら、そのアイコンの詳細ページでアイコンのクラス名を確認します。

例えば次のような魚のアイコンの場合、左上に<i class="fas fa-fish"></i>と書かれています。

アイコン詳細画面
アイコン詳細画面
アイコンのクラス名確認場所
アイコンのクラス名確認場所

この class="fas fa-fish" をメモしておき、SWELLのアイコン用ショートコードで指定します。

SWELLのアイコン用ショートコードを使う

あとは、先ほどメモしておいたクラス名を使って、次のようにエディターに記述すればOKです。

[icon class="fas fa-fish"]

実際には、こんな感じで使用できます →

上記の文章は、エディター上では次のようになっています。

エディター画面上での様子
エディター画面上での様子

アイコン用ショートコードの使い方について詳しくは以下のページをご覧ください。

あわせて読みたい
アイコンを簡単に呼び出せるショートコードの使い方
アイコンを簡単に呼び出せるショートコードの使い方SWELLでは、数種類のアイコンをフォントとして読み込んでいます。(例: / / )このページでは、これらのアイコンを文中で簡単に呼び出すためのショートコードの使い方...
記事下のウィジェットエリア

この記事が気に入ったら
フォローしてね!

目次
目次