SWELLで使える78種類のアイコンのクラス名については公式サイトで紹介されていますが、CSSに含まれているcontent・colorの一覧も含めて紹介します。
目次
基本的な使い方
アイコンの基本的な使い方は、以下の2通りあります。
| ショートコード | ショートコードの使い方は、公式マニュアルをお読みください。 |
| HTMLコード | <i class="クラス名"></i> |
クラス名については以下の通りです。
アイコン一覧
特に注釈がない限り、アイコンの基本色は#333となります。
| アイコン | クラス名 | content | color |
|---|---|---|---|
| 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 | \e90b | orange | |
| icon-tumblr | \e90c | #36465d | |
| icon-twitter | \e90d | #1da1f2 | |
| icon-wordpress | \e90e | ||
| icon-youtube | \e90f | red | |
| 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 |
SWELL ver 2.7.2以前のアイコンカラーを適用したい場合
以前にアイコンに色が付いていたものの中で、Google+のアイコン（icon-googleplus）が廃止となっています。それ以外のアイコンについてはver 2.7.3以降も維持されていますので、以下のCSSを追加CSS等に入力すると、ver 2.7.2以前のアイコンカラーが適用可能です。
すべて黒色のアイコンカラーを使用したい場合は、CSSを追記せず、そのままご利用ください（CSSを追記した場合は削除してください）。
.icon-amazon:before {
color: #f90;
}
.icon-feedly:before {
color: #2bb24c;
}
.icon-instagram:before {
color: #e4405f;
}
.icon-line:before {
color: #00c300;
}
.icon-pinterest:before {
color: #bd081c;
}
.icon-pocket:before {
color: #ef3f56;
}
.icon-rss:before {
color: orange;
}
.icon-tumblr:before {
color: #36465d;
}
.icon-twitter:before {
color: #1da1f2;
}
.icon-youtube:before {
color: red;
}Font Awesomeのアイコンも使用可能
上記アイコンのほかに、簡単な設定でFont Awesomeのアイコンを使用することも可能です。詳しくは公式マニュアルをご確認ください。
SWELLに絵文字を追加「SWELL PLUS」
suyaさん（@suyasite）が、SWELLに1245種類の絵文字（アイコンフォント）を追加する子テーマ「SWELL PLUS」を作ってくださいました。この子テーマを導入すると100ミリ秒くらいは遅くなることがあるそうですが、試してみてご不要であれば、アンインストールしていただければ良いとのことです。
マニュオン
SWELL子テーマ「SWELL PLUS」【目次ハイライト・フローティングボタン】 | マニュオン
シンプルなSWELLに最小限の機能追加 「SWELL PLUS」は、WordPressテーマ「SWELL」に機能を追加する子テーマです。 SWELL本体で使用できるアイコンが充実したため、アイコン…
アイコンの使用可能場所
アイコンはショートコードやHTMLタグが使用可能な場所など、比較的多くの場所で使用可能ですが、実際にアイコンを使用したカスタマイズ例などは以下の記事で紹介しています。
