SWELLのCSSカスタマイズでも使えるアイコン一覧

当ページのリンクには広告が含まれています。

SWELLはWebアイコンのFont Awesomeを使っていません。

高速化を考えて、独自に抽出したアイコン(IcoMoon)を使用しています。

  • ショートコードで使用できる
  • CSSでも使用できる

本記事では、そんなSWELLで埋め込まれているアイコンの一覧表をまとめました。

目次

SWELLアイコン一覧

SWELLアイコンは下記のようなショートコードを入力して表示することができます。

icon class="icon-amazon"

CSSで使う場合は疑似要素に下記のように記述します。

font-family: icomoon!important;
content: "\e921"!important;

わかりやすいようにSWELLアイコンをCSSで使用したい場合の一覧を作成してみました。

SWELLアイコン一覧

SWELLアイコン一覧です。

Font Awesomeを使わずにSWELLで内蔵されているアイコンを活用したい時に参考にしてください。

アイコンアイコン名CSS
icon-amazon\e91e
icon-codepen\e900
icon-facebook\e901
icon-feedly\e902
icon-github\e903
icon-hatebu\e905
icon-instagram\e906
icon-line\e907
icon-medium\e908
icon-pinterest\e909
icon-pocket\e90a
icon-rss\e90b
icon-tumblr\e90c
icon-twitter\e90d
icon-wordpress\e90e
icon-youtube\e90f
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-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-file-empty\e924
icon-folder\e92f
icon-price-tag\e935
icon-bubble\e96b
icon-bubbles\e970
icon-link\e9c5
icon-eye\e9ce
icon-bookmark\e9d3
icon-star-empty\e9d7
icon-star-half\e9d8
icon-star-full\e9d9
icon-heart\e9da
icon-blocked\ea0e
icon-share\ea82

まとめ

本記事ではCSSでも使える!SWELLアイコン一覧まとめについて書きました。

Font Awesomeを使わずに、装飾したい場合はSWELLアイコンを活用しましょう。

よかったらシェアしてね!
目次