SWELLでは、icomoonというfont-familyを使ってアイコンを表示しています。
fontawesomeは使っていません。
icomoonのアイコンとCSSクラス・Unicodeの対応表を紹介します。
Contents
SWELLで使えるicomoonのクラスとUnicode
SWELLで使えるicomoonフォントのCSSクラスとUnicodeは下記のようになっています。
| class名 | Unicode |
| icon-clipboard-copy | \e93b |
| icon-clipboard-copied | \e93c |
| icon-swell | \e936 |
| icon-amazon | \e91e |
| icon-tiktok | \e93e |
| icon-room | \e93d |
| 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-more_arrow | \e930 |
| icon-batsu | \e91f |
| icon-cross | \e91f |
| icon-circle | \ea56 |
| icon-check | \e923 |
| icon-checkmark | \e923 |
| icon-posted | \e931 |
| icon-modified | \e92d |
| icon-search | \e92e |
| icon-close-thin | \e920 |
| icon-menu-thin | \e91b |
| icon-info | \e91d |
| icon-alert | \e916 |
| icon-hatena | \e917 |
| icon-index | \e918 |
| icon-arrow_drop_down | \e5c5 |
| icon-arrow_drop_up | \e5c7 |
| icon-flag | \e153 |
| icon-border_color | \e22b |
| icon-cart | \e939 |
| icon-shopping_cart | \e939 |
| icon-person | \e7fd |
| icon-settings | \e8b8 |
| icon-thumb_down | \e8db |
| icon-thumb_up | \e8dc |
| icon-chevron-small-down | \e910 |
| icon-chevron-small-left | \e911 |
| icon-chevron-small-right | \e921 |
| icon-chevron-small-up | \e912 |
| icon-book | \e91a |
| icon-megaphone | \e913 |
| icon-minus | \e919 |
| icon-plus | \e91c |
| icon-download | \e914 |
| icon-pen | \e934 |
| icon-contact | \e92c |
| icon-envelope | \e92c |
| icon-mail | \e92c |
| icon-markunread | \e92c |
| icon-light-bulb | \e915 |
| 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-phone1 | \e942 |
| icon-phone | \e942 |
| 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-film | \e93a |
| icon-headphones | \e938 |
| icon-image | \e937 |
Unicodeを使う時の注意点
Unicodeを使って、新しいCSSクラスを作る時は、font-styleの指定が必要です。
初期表示のままだとイタリックになっています。
.myicon-pen::before {
font-family: icomoon;
font-style: normal;
content: "\e934";
}
fontawesomeからicomoonに切り替える例
AFFINGERからSWELLにテーマを切り替えると、fontawesome部分のアイコン表示が消えてしまいます。
fontawesomeのiタグはそのままで、CSSにfont-familyを指定すれば切り替えることができます。
//fontawesomeタグはこのまま利用する
<i class="fa fa-check" aria-hidden="true"></i>
//CSSのクラスでfa-checkをつくる
.fa-check::before {
font-family: icomoon;
font-style: normal;
content: "\e923";
}
【SWELLテーマ用】アイコン確認HTMLタグ
SWELLの投稿記事で下記のtableタグを貼り付ければ、アイコンが表示されます。
どのクラス（またはUnicode）とどのアイコンが対応しているかが分かりやすくなります。
<table> <tr><td><span class="icon-clipboard-copy"></span>icon-clipboard-copy</td><td>\e93b</td></tr> <tr><td><span class="icon-clipboard-copied"></span>icon-clipboard-copied</td><td>\e93c</td></tr> <tr><td><span class="icon-swell"></span>icon-swell</td><td>\e936</td></tr> <tr><td><span class="icon-amazon"></span>icon-amazon</td><td>\e91e</td></tr> <tr><td><span class="icon-tiktok"></span>icon-tiktok</td><td>\e93e</td></tr> <tr><td><span class="icon-room"></span>icon-room</td><td>\e93d</td></tr> <tr><td><span class="icon-codepen"></span>icon-codepen</td><td>\e900</td></tr> <tr><td><span class="icon-facebook"></span>icon-facebook</td><td>\e901</td></tr> <tr><td><span class="icon-feedly"></span>icon-feedly</td><td>\e902</td></tr> <tr><td><span class="icon-github"></span>icon-github</td><td>\e903</td></tr> <tr><td><span class="icon-googleplus"></span>icon-googleplus</td><td>\e904</td></tr> <tr><td><span class="icon-hatebu"></span>icon-hatebu</td><td>\e905</td></tr> <tr><td><span class="icon-instagram"></span>icon-instagram</td><td>\e906</td></tr> <tr><td><span class="icon-line"></span>icon-line</td><td>\e907</td></tr> <tr><td><span class="icon-medium"></span>icon-medium</td><td>\e908</td></tr> <tr><td><span class="icon-pinterest"></span>icon-pinterest</td><td>\e909</td></tr> <tr><td><span class="icon-pocket"></span>icon-pocket</td><td>\e90a</td></tr> <tr><td><span class="icon-rss"></span>icon-rss</td><td>\e90b</td></tr> <tr><td><span class="icon-tumblr"></span>icon-tumblr</td><td>\e90c</td></tr> <tr><td><span class="icon-twitter"></span>icon-twitter</td><td>\e90d</td></tr> <tr><td><span class="icon-wordpress"></span>icon-wordpress</td><td>\e90e</td></tr> <tr><td><span class="icon-youtube"></span>icon-youtube</td><td>\e90f</td></tr> <tr><td><span class="icon-more_arrow"></span>icon-more_arrow</td><td>\e930</td></tr> <tr><td><span class="icon-batsu"></span>icon-batsu</td><td>\e91f</td></tr> <tr><td><span class="icon-cross"></span>icon-cross</td><td>\e91f</td></tr> <tr><td><span class="icon-circle"></span>icon-circle</td><td>\ea56</td></tr> <tr><td><span class="icon-check"></span>icon-check</td><td>\e923</td></tr> <tr><td><span class="icon-checkmark"></span>icon-checkmark</td><td>\e923</td></tr> <tr><td><span class="icon-posted"></span>icon-posted</td><td>\e931</td></tr> <tr><td><span class="icon-modified"></span>icon-modified</td><td>\e92d</td></tr> <tr><td><span class="icon-search"></span>icon-search</td><td>\e92e</td></tr> <tr><td><span class="icon-close-thin"></span>icon-close-thin</td><td>\e920</td></tr> <tr><td><span class="icon-menu-thin"></span>icon-menu-thin</td><td>\e91b</td></tr> <tr><td><span class="icon-info"></span>icon-info</td><td>\e91d</td></tr> <tr><td><span class="icon-alert"></span>icon-alert</td><td>\e916</td></tr> <tr><td><span class="icon-hatena"></span>icon-hatena</td><td>\e917</td></tr> <tr><td><span class="icon-index"></span>icon-index</td><td>\e918</td></tr> <tr><td><span class="icon-arrow_drop_down"></span>icon-arrow_drop_down</td><td>\e5c5</td></tr> <tr><td><span class="icon-arrow_drop_up"></span>icon-arrow_drop_up</td><td>\e5c7</td></tr> <tr><td><span class="icon-flag"></span>icon-flag</td><td>\e153</td></tr> <tr><td><span class="icon-border_color"></span>icon-border_color</td><td>\e22b</td></tr> <tr><td><span class="icon-cart"></span>icon-cart</td><td>\e939</td></tr> <tr><td><span class="icon-shopping_cart"></span>icon-shopping_cart</td><td>\e939</td></tr> <tr><td><span class="icon-person"></span>icon-person</td><td>\e7fd</td></tr> <tr><td><span class="icon-settings"></span>icon-settings</td><td>\e8b8</td></tr> <tr><td><span class="icon-thumb_down"></span>icon-thumb_down</td><td>\e8db</td></tr> <tr><td><span class="icon-thumb_up"></span>icon-thumb_up</td><td>\e8dc</td></tr> <tr><td><span class="icon-chevron-small-down"></span>icon-chevron-small-down</td><td>\e910</td></tr> <tr><td><span class="icon-chevron-small-left"></span>icon-chevron-small-left</td><td>\e911</td></tr> <tr><td><span class="icon-chevron-small-right"></span>icon-chevron-small-right</td><td>\e921</td></tr> <tr><td><span class="icon-chevron-small-up"></span>icon-chevron-small-up</td><td>\e912</td></tr> <tr><td><span class="icon-book"></span>icon-book</td><td>\e91a</td></tr> <tr><td><span class="icon-megaphone"></span>icon-megaphone</td><td>\e913</td></tr> <tr><td><span class="icon-minus"></span>icon-minus</td><td>\e919</td></tr> <tr><td><span class="icon-plus"></span>icon-plus</td><td>\e91c</td></tr> <tr><td><span class="icon-download"></span>icon-download</td><td>\e914</td></tr> <tr><td><span class="icon-pen"></span>icon-pen</td><td>\e934</td></tr> <tr><td><span class="icon-contact"></span>icon-contact</td><td>\e92c</td></tr> <tr><td><span class="icon-envelope"></span>icon-envelope</td><td>\e92c</td></tr> <tr><td><span class="icon-mail"></span>icon-mail</td><td>\e92c</td></tr> <tr><td><span class="icon-markunread"></span>icon-markunread</td><td>\e92c</td></tr> <tr><td><span class="icon-light-bulb"></span>icon-light-bulb</td><td>\e915</td></tr> <tr><td><span class="icon-lock-closed"></span>icon-lock-closed</td><td>\e932</td></tr> <tr><td><span class="icon-lock-open"></span>icon-lock-open</td><td>\e933</td></tr> <tr><td><span class="icon-home"></span>icon-home</td><td>\e922</td></tr> <tr><td><span class="icon-quill"></span>icon-quill</td><td>\e929</td></tr> <tr><td><span class="icon-books"></span>icon-books</td><td>\e925</td></tr> <tr><td><span class="icon-file-empty"></span>icon-file-empty</td><td>\e924</td></tr> <tr><td><span class="icon-file-text2"></span>icon-file-text2</td><td>\e926</td></tr> <tr><td><span class="icon-file-picture"></span>icon-file-picture</td><td>\e927</td></tr> <tr><td><span class="icon-file-music"></span>icon-file-music</td><td>\e928</td></tr> <tr><td><span class="icon-file-video"></span>icon-file-video</td><td>\e92a</td></tr> <tr><td><span class="icon-file-zip"></span>icon-file-zip</td><td>\e92b</td></tr> <tr><td><span class="icon-folder"></span>icon-folder</td><td>\e92f</td></tr> <tr><td><span class="icon-price-tag"></span>icon-price-tag</td><td>\e935</td></tr> <tr><td><span class="icon-phone1"></span>icon-phone1</td><td>\e942</td></tr> <tr><td><span class="icon-phone"></span>icon-phone</td><td>\e942</td></tr> <tr><td><span class="icon-bubble"></span>icon-bubble</td><td>\e96b</td></tr> <tr><td><span class="icon-bubbles"></span>icon-bubbles</td><td>\e970</td></tr> <tr><td><span class="icon-quotes-left"></span>icon-quotes-left</td><td>\e977</td></tr> <tr><td><span class="icon-quotes-right"></span>icon-quotes-right</td><td>\e978</td></tr> <tr><td><span class="icon-link"></span>icon-link</td><td>\e9c5</td></tr> <tr><td><span class="icon-attachment"></span>icon-attachment</td><td>\e9cd</td></tr> <tr><td><span class="icon-eye"></span>icon-eye</td><td>\e9ce</td></tr> <tr><td><span class="icon-bookmarks"></span>icon-bookmarks</td><td>\e9d3</td></tr> <tr><td><span class="icon-star-empty"></span>icon-star-empty</td><td>\e9d7</td></tr> <tr><td><span class="icon-star-half"></span>icon-star-half</td><td>\e9d8</td></tr> <tr><td><span class="icon-star-full"></span>icon-star-full</td><td>\e9d9</td></tr> <tr><td><span class="icon-heart"></span>icon-heart</td><td>\e9da</td></tr> <tr><td><span class="icon-blocked"></span>icon-blocked</td><td>\ea0e</td></tr> <tr><td><span class="icon-share"></span>icon-share</td><td>\ea82</td></tr> <tr><td><span class="icon-film"></span>icon-film</td><td>\e93a</td></tr> <tr><td><span class="icon-headphones"></span>icon-headphones</td><td>\e938</td></tr> <tr><td><span class="icon-image"></span>icon-image</td><td>\e937</td></tr> </table>
