サイト全体設定 > お知らせバー お知らせバーにボタンを配置できます

アクションフック 'swell_before_post_head'

SWELLで使えるアイコンとクラス名、CSSに含まれているcotent・color一覧

アクションフック 'swell_before_post_thumb'

SWELLで使える78種類のアイコンのクラス名については公式サイトで紹介されていますが、CSSに含まれているcontent・colorの一覧も含めて紹介します。

目次

基本的な使い方

アイコンの基本的な使い方は、以下の2通りあります。

ショートコードショートコードの使い方は、公式マニュアルをお読みください。
HTMLコード<i class="クラス名"></i>

クラス名については以下の通りです。

アイコン一覧

特に注釈がない限り、アイコンの基本色は#333となります。

アイコンクラス名contentcolor
icon-amazon\e91e#f90
icon-codepen\e900
icon-facebook\e901
icon-feedly\e902#2bb24c
icon-github\e903
icon-googleplus\e904#dc4e41
icon-hatebu\e905
icon-instagram\e906#e4405f
icon-line\e907#00c300
icon-medium\e908
icon-pinterest\e909#bd081c
icon-pocket\e90a#ef3f56
icon-rss\e90borange
icon-tumblr\e90c#36465d
icon-twitter\e90d#1da1f2
icon-wordpress\e90e
icon-youtube\e90fred
icon-swell\e936
icon-phone\e942
icon-info\e91d
icon-light-bulb\e915
icon-cart\e939
icon-thumb_down\e8db
icon-thumb_up\e8dc
icon-person\e7fd
icon-mail\e92c
icon-download\e914
icon-megaphone\e913
icon-pen\e934
icon-more_arrow\e930
icon-batsu\e91f
icon-check\e923
icon-posted\e931
icon-modified\e92d
icon-search\e92e
icon-close-thin\e920
icon-menu-thin\e91b
icon-alert\e916
icon-hatena\e917
icon-index\e918
icon-arrow_drop_down\e5c5
icon-arrow_drop_up\e5c7
icon-flag\e153
icon-settings\e8b8
icon-chevron-small-down\e910
icon-chevron-small-left\e911
icon-chevron-small-right\e921
icon-chevron-small-up\e912
icon-book\e91a
icon-minus\e919
icon-plus\e91c
icon-lock-closed\e932
icon-lock-open\e933
icon-home\e922
icon-quill\e929
icon-books\e925
icon-file-empty\e924
icon-file-text2\e926
icon-file-picture\e927
icon-file-music\e928
icon-file-video\e92a
icon-file-zip\e92b
icon-folder\e92f
icon-price-tag\e935
icon-bubble\e96b
icon-bubbles\e970
icon-quotes-left\e977
icon-quotes-right\e978
icon-link\e9c5
icon-attachment\e9cd
icon-eye\e9ce
icon-bookmarks\e9d3
icon-star-empty\e9d7
icon-star-half\e9d8
icon-star-full\e9d9
icon-heart\e9da
icon-blocked\ea0e
icon-share\ea82
icon-room\e93d

Font Awesomeのアイコンも使用可能

上記アイコンのほかに、簡単な設定でFont Awesomeのアイコンを使用することも可能です。詳しくは公式マニュアルをご確認ください。

SWELLに絵文字を追加「SWELL PLUS」

suyaさん(@suyasite)が、SWELLに1245種類の絵文字(アイコンフォント)を追加する子テーマ「SWELL PLUS」を作ってくださいました。この子テーマを導入すると100ミリ秒くらいは遅くなることがあるそうですが、試してみてご不要であれば、アンインストールしていただければ良いとのことです。

アイコンの使用可能場所

アイコンはショートコードやHTMLタグが使用可能な場所など、比較的多くの場所で使用可能ですが、実際にアイコンを使用したカスタマイズ例などは以下の記事で紹介しています。

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

この記事を書いた人

埼玉県在住・男性。SWELLを使い続けて2年、フォーラムで回答し続けて1年以上。この経験から得られたノウハウをみなさんに役立てたいと思い、このサイトを作りました。

目次