SWELLにあるアイコン一覧と使い方｜font awesomeから呼び出す方法も解説

「SWELLで使えるアイコンが知りたい…」

「font awesomeでアイコンの呼び出し方は？」

「オリジナル画像をアイコンにできる？」

この記事ではそんな方に向けて、SWELLでアイコンの使い方を解説します。

かめコンパス

こんにちは、かめコンパスです！

この記事を読めば、あなたも簡単に

• オシャレなアイコンをページ内に挿入できる

ようになります。

私もあなたと同じことに悩んでたのですが、本記事の方法でサクッと解決でき、視覚的に記事の内容を分かりやすく伝えることができました。

どこよりも分かりやすく書いている自信がありますので、あなたもパパッと解決してみてください！

＼SWELL購入を検討中の人はこちらもご覧ください！／

あわせて読みたい

【口コミ多数！】SWELLの評判レビュー｜メリット・デメリットや使ってみた感想まとめ 「SWELLを購入しようか迷っている…」 「SWELLのメリット・デメリットは？」 「SWELLを導入すれば何が変わるのか知りたい」 この記事ではそんな方に向けて、SWELLの評判…

SWELLで使えるアイコン一覧と呼び出し方法4選

SWELLでは、以下の画像のようなオシャレなアイコンを使用できます。（一部抜粋）

ザッと数えただけでも1000種類以上もありました！

かめコンパス

何を使おうか迷ってしまうね

これらアイコンを呼び出す方法は、以下の4パターンあります。

それぞれ詳しく解説します。

ブロックツールバーからアイコンを呼び出す

ブロックツールバーを使えば、文章中にアイコンを挿入できます。

まず、アイコンを呼び出したい段落ブロックを選択します。

ブロックツールバーの項目「アイコン」をクリックすると、アイコン一覧が表示されるので、利用したいアイコンを選んでください。

かめコンパス

「 (鉛筆マーク)」や「 (チェックマーク)」はお気に入りでよく使ってるよ

特定のブロックでアイコンを呼び出す

SWELLでは以下のような特定のブロックで、ブロックサイドバーからアイコンを呼び出すことができます。

※上記リンクをクリックすると、そのブロックの使い方を詳しく確認できます。

これら特定のブロックにアイコンを設定すると以下のようになります。

かめコンパス

使用するブロックによってはカラー設定もできるよ

ショートコードの入力でアイコンを呼び出す

以下のようにショートコードを入力して、簡単にアイコンを挿入することもできます。

[icon 〇〇]

アイコンのクラス名はSWELL公式サイトで確認できますが、本記事でも抜粋して記載します。

参考：SWELLで使えるアイコンの一覧

[icon icon-home]

かめコンパス

ブロックツールバーからアイコンを挿入させたほうが便利かな…

ただ、ショートコードを利用すれば、SWELLにはないアイコンを呼び出すことができます。（後ほど詳しく解説します。）

SVGタグの入力でアイコンを呼び出す

ブロックツールバーから呼び出せるアイコン一覧にSVGタグを入力する欄があります。

この欄に指定のSVGタグを入力することで、自作したオリジナル画像をアイコンとして表示させることができます。

例えば、サイトのロゴやSWELLにないアイコンを表示させることができますよ。

【 】⇐当ブログ「かめコンパス」のアイコンです！

SVGタグの入力でオリジナル画像を呼び出す方法は、後ほど詳しく解説します。

SWELLにないアイコンをfont awesomeから呼び出す方法

webアイコンフォント「font awesome」を使って、SWELLにないアイコンを利用することができます。

font awesomeのアイコンをSWELLに呼び出す手順は、以下の3ステップです。

それぞれの手順を詳しく解説します。

手順①：font awesomeの読み込み設定を行う

まず、font awesomeの読み込み設定を行います。

WordPress管理画面で、SWELL設定をクリックしてください。

「font awesome」タブ内にある「Font Awesomeの読み込み」で以下の2項目を選択し、変更を保存をクリックしましょう。

手順②：font awesomeからクラス名をコピーする

「font awesome」公式サイトへアクセスします。

利用したいアイコンをクリックし、クラス名だけをコピーしましょう。

<i class=”〇〇”></i>の〇〇だけをコピーしてください。

手順③：クラス名をショートコードに貼り付ける

font awesomeからコピーしたクラス名をショートコードに貼り付けていきます。

アイコンを貼り付けたい場所で、ブロックツールバーの項目「ショートコード」⇒「アイコン」の順にクリックします。

[icon class="XXXX"]

クラス名の例：fa-solid fa-circle-user
クラス名を貼り付け後：[icon class="fa-solid fa-circle-user"]

これで、SWELLにないアイコンをfont awesomeから呼び出せます。

かめコンパス

基本、SWELLにあるアイコンで事足りると思いますが、どうしても使いたいアイコンがない場合に利用したいね

自作のアイコンをSWELLのSVGタグで呼び出す方法

SVGタグを直接入力することで、自作したオリジナル画像をアイコンとして表示させることができます。

自作のアイコンをSWELLに呼び出す手順は、以下の3ステップです。

それぞれの手順を詳しく解説します。

手順①：オリジナル画像をSVG形式に変換する

まず、オリジナル画像の形式(PNG、JPEGなど)をSVGに変換していきます。

かめコンパス

SVG形式に変換する前に画像を背景透過することをおすすめだよ！

背景透過とは…写真や画像の周りの背景を削除・透明にすること

画像を背景透過させる方法は、下の記事を参考にしてください。

「Convertio」公式サイトにアクセスし、「ファイルを選ぶ」からアイコンにしたい画像を選び、変換をクリックしてください。

ダウンロードをクリックするとSVG形式の画像を生成できます。

手順②：オリジナル画像のSVGタグをコピーする

ダウンロードしたSVG形式の画像を右クリックし、以下の手順でSVGタグをコピーします。

手順③：オリジナル画像のSVGタグを貼り付ける

アイコンを貼り付けたい場所で、ブロックツールバーの項目「アイコン」をクリックします。

「ここにSVGタグを直接入力できます。(scriptタグは除外されます)」と書かれた欄に、先ほどコピーしたSVGタグを貼り付けましょう。

これで、自作のアイコンをSVGタグで呼び出せます。

もし、アイコンが表示されない場合は、「SVGOMG」でSVG形式の画像のコードを圧縮してからSVGタグをコピペしてください。

まとめ：SWELLアイコンを使って情報を分かりやすく伝えよう

今回は、SWELLでアイコンの使い方を紹介しました。

当ブログではSWELLに関する記事をいくつか書いてます。

下のページにまとめていますので、のぞいてみてください。

かめコンパス

ためになったという人は“ Twitterフォロー”や“ ブックマーク”してくれると嬉しいです！

・　　　・　　　・

＼当ブログ愛用のWordPressテーマはこちら！／

SWELL公式サイトを見る ＞

【口コミ多数！】SWELLの評判レビュー｜メリット・デメリットや使ってみた感想まとめ

SWELLの関連記事まとめ

SWELL専用ブロックの使い方

アコーディオンブロック

バナーリンクブロック

ボックスメニューブロック

SWELLボタンブロック

キャプションボックスブロック

リッチカラムブロック

説明リスト(DL)ブロック

FAQブロック

フルワイドブロック

ステップブロック

タブブロック

ABテストブロック

広告タグブロック

ふきだしブロック

ブログパーツブロック

リンクリストブロック

投稿リストブロック

関連記事ブロック

制限エリアブロック

商品レビューブロック

コアブロックの使い方

段落ブロック

リストブロック

画像ブロック

カバーブロック

テーブルブロック

見出しのデザイン設定

SWELLサイト全体のカスタマイズ

サイト型トップページ

ヘッダー

ヘッダーメニュー(グローバルナビ)

フッター

サイドバー

ピックアップバナー

メニュー機能の説明と使い方まとめ