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アイコンを活用しましょう。
