ユーザビリティ調査を実施しています。お時間あればご協力お願いします。

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

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

fontawesomeは使っていません。

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

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)とどのアイコンが対応しているかが分かりやすくなります。

【SWELLで使えるアイコン】

<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>

-SWELL
-,