SWELL│CSSでも使える!SWELLアイコン一覧

swell-icon

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-googleplus\e904
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-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
SWELLアイコン一覧

SWELLアイコンに関する公式ヘルプページ

まず公式のヘルプページを紹介します。

SWELLアイコンは下記にまとまっています。

SWELLアイコンの読み込み方はこちらから

おまけです。SWELLでFont Awesomeのアイコンを使う方法

まとめ

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

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

SWELLカスタマイズ全まとめ

SWELLに関連するカスタマイズ記事を全てまとめました。

是非チェックしてみてください。

contact

お問い合わせ

WordPressの技術的なお悩みやご要望がありましたら、お気軽にお問い合わせください。

もちろんデザインに関することも相談できます。

  • 見た目の調整エラー相談その他技術に関する相談をしたい
  • 絞り込み検索オリジナルのブロックを作りたい
  • SEO内部施策構造化データの設定を依頼したい
  • サイトの高速化を診断・依頼したい
  • トップページデザインを依頼したい

この記事を書いた人

すいみんのアバター すいみん テクニカルアーティスト

カナダ在住のテクニカルアーティスト。
大学ではアート(油画)を専攻。卒業後はアニメ・映画・映像・ゲーム業界で、2Dから3DCG、ゲームエンジン、WEB制作まで幅広いコンテンツ制作の経験を積んでいます。デザイナーとエンジニアの中間のポジションでお仕事をするのが得意。

目次
閉じる