SWELLで使える「icomoon」アイコンのCSSクラスとUnicodeを紹介

SWELLでは、icomoonというfont-familyを使ってアイコンを表示しています。

fontawesomeは使っていません。

icomoonのアイコンとCSSクラス・Unicodeの対応表を紹介します。

SWELLで使えるicomoonのクラスとUnicode

SWELLで使えるicomoonフォントのCSSクラスとUnicodeは下記のようになっています。

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>