SWELLのアイコン一覧とFont Awesomeアイコンの使い方

当サイトでは広告を掲載しています。

SWELLではサイトの記事内や外観の色々なところでのようなアイコンが使えます。

このTwitterアイコンの場合は

[icon class="icon-twitter"]

このようなショートコードを本文中に挿入することでのようにアイコン化されます。

SWELL自体に約80種類が用意されておりますので、SWELLを有効化すれば誰でも使えます。

また、SWELLでは外部のアイコンサイトFont Awesomeのアイコンも読み込めますので

SWELLに用意されている約80種類以外の様々なアイコンを表示させることが可能です。

例えば当サイトのグローバルナビに使っているものはFont Awesomeのアイコンです。

これらの使い方についてご紹介しますので、是非参考にしてみてください。

目次

運営者プロフィール@aoto_yuzuto

ココナラでブログ相談受付中

技術相談・方向性相談・外観デザイン設定など

ご相談プラン一覧はこちら

SWELLのアイコンショートコードの呼び出し

まずはじめに、アイコン用のショートコードを記事の中に呼び出してみましょう。

段落の途中で、以下のような手順でメニューの中からショートコードの呼び出しが可能です。

あとはこの[icon class="XXXX"]のXXXXを編集することで色々なアイコンを挿入できます。

SWELLで使えるアイコン一覧

それでは次に、SWELLを有効化するだけで使えるアイコン一覧をご紹介します。

実際に使う場合は、それぞれのアイコンのクラス名をショートコード内に入力してください。

[icon class="ここにクラス名を入力"]
アイコンクラス名アイコンクラス名
icon-amazonicon-codepen
icon-facebookicon-feedly
icon-githubicon-googleplus
icon-hatebuicon-instagram
icon-lineicon-medium
icon-pinteresticon-pocket
icon-rssicon-tumblr
icon-twittericon-wordpress
icon-youtubeicon-swell
icon-phoneicon-info
icon-light-bulbicon-cart
icon-thumb_downicon-thumb_up
icon-personicon-mail
icon-downloadicon-megaphone
icon-penicon-more_arrow
icon-batsuicon-check
icon-postedicon-modified
icon-searchicon-close-thin
icon-menu-thinicon-alert
icon-hatenaicon-index
icon-arrow_drop_downicon-arrow_drop_up
icon-flagicon-settings
icon-chevron-small-downicon-chevron-small-left
icon-chevron-small-righticon-chevron-small-up
icon-bookicon-minus
icon-plusicon-lock-closed
icon-lock-openicon-share
icon-homeicon-quill
icon-booksicon-file-empty
icon-file-text2icon-file-picture
icon-file-musicicon-file-video
icon-file-zipicon-folder
icon-price-tagicon-bubble
icon-bubblesicon-quotes-left
icon-quotes-righticon-link
icon-attachmenticon-eye
icon-bookmarksicon-star-empty
icon-star-halficon-star-full
icon-hearticon-blocked

これだけでも十分色々なアイコンがありますので、まずは試しに使ってみましょう。

Font Awesomeアイコンの使い方

SWELL側の設定

SWELLでFont Awesomeのアイコンを使うためには、SWELLの設定を変更します。

SWELL設定からFont Awesomeの設定を以下のように変更して変更を保存しましょう。

これで、SWELLアイコンだけではなくFont Awesomeのアイコンも使えるようになりました。

例えば植物の芽が出ているはFont Awesomeのアイコンを使用しています。

ショートコードは以下の通りです。

[icon class="fas fa-seedling"]

SWELLのアイコンを使う時と同じ形で、Font Awesomeのクラス名を入力すればOKです。

Font Awesomeでアイコン検索

Font Awesome公式サイトを開いてfree and open-source iconsをクリックしましょう。

Font Awesomeのアイコンには有料版と無料版がありますので、無料版を使用します。

無料版だけでも現在2000種類以上ありますので、使いたいアイコンは十分見つかります。

以下のような画面になりましたら、使いたいアイコンをクリックしてみてください。

するとHTMLコードが表示されますので、緑色の部分をクラス名として入力します。

例えばこのhouseのアイコンなら、先ほどのショートコードと同じようにクラス名として

[icon class="fa-solid fa-house"]

のようにWordPressの編集画面に入力するとアイコンとして表示されます。

なお、Font Awesome側で緑色の部分のみコピーすることはできず、コードをクリックすると『Copied』と表示されますが、それはHTMLとして全体をコピーした状態になっています。

なのでFont Awesome側でコピーしたコードは、HTML編集モードなら貼り付けることが出来ますが

ビジュアル編集では貼り付けられないので、緑色の部分を手打ち入力したほうがはやいです。

なお、ビジュアル編集とHTML編集って何?という方もいるかもしれませんので説明しておくと

WordPressでは基本ビジュアル編集モードになっていますので、今選択中のブロックメニューの三点リーダーメニューの中からHTMLとして編集を選択するとHTML編集モードになります。

このHTML編集モードならFont Awesome側でコピーしたコードを貼り付けることが出来ます。

ですが入力したいのはその中の緑色の文字部分だけなので、手打ちで入力しましょう。

アイコンの使いどころ

SWELLのアイコンもFont Awesomeのアイコンも、WordPressの色々な場所で使えます。

例えば今回の紹介記事の中でも使っているように記事の中でものように使えますし

先にお話しした、グローバルナビの中でも以下のようにして使うことが出来ます。

後はボタンの中にも使えますので、より読者の方に視覚的に情報を伝えることが出来ます。

一度使い方を覚えれば簡単ですので、SWELLをお使いの方は是非使ってみましょう。

最後まで読んで頂きありがとうございました。

よかったらシェアしてね!
  • URLをコピーしました!
  • URLをコピーしました!
目次