IcoMoonのクラス名とコード名

The Thor(ザ・トール) アイコンの使い方と、アイコン表(IcoMoon)

ワードプレスの有料テーマ TheThorには、設定不要でIcoMoonのアイコンフォントを利用することができます。

クラシックエディターでは「アイコン挿入」ボタンがありますが、
ブロックエディターではそのボタンがありません。

そのため、HTMLで簡単に使えるように、よく使うアイコン一覧表を作りました。

各アイコンと、クラス名・コード名を一覧にしています。

Ad

アイコンのイメージ

The Thorで使えるアイコンはこのような感じです。

 
 
 

ブロックエディターで使う方法

<span></span>に、class名を指定します。

例えば、LINEのアイコン「」であれば…

<span class="icon-line"></span>

疑似要素で使う方法

content:” “に、コード名を指定して、使用します。

例えばLINEのアイコン「」であれば….

content: "\e90b";

アイコンの表はこちらです

ヘビー使い!記号系

アイコン 見本class名(エディターで使う)code名(cssなどで使う)
icon-new\e900
icon-home3\e905
icon-home2\e906
icon-home\e908
icon-search\e907
icon-pencil\e90c
icon-pencil2\e90d
icon-close\e90f
icon-menu\e910
icon-image\e916
icon-images\e917
icon-camera\e918
icon-music\e91a
icon-cart\e943
icon-phone\e94b
icon-phone-hang-up\e94c
icon-mail5\e94e
icon-location\e950
icon-location2\e951
icon-calendar\e95c
icon-bubble\e974
icon-bubbles\e975
icon-bubbles2\e976
icon-bubbles4\e979
icon-link\e9cc
icon-attachment\e9ce
icon-bookmark\e9d3

矢印、アロー 記号

アイコン 見本class名(エディターで使う)code名(cssなどで使う)
icon-arrow-down\ea38
icon-arrow-up\ea34
icon-arrow-up-right\ea35
icon-arrow-right\ea36
icon-arrow-down-right\ea37
icon-arrow-up-left\ea33
icon-arrow-left\ea3a
icon-arrow-down-left\ea39
icon-arrow-down2\ea40
icon-arrow-up2\ea3c
icon-arrow-up-right2\ea3d
icon-arrow-down-right2\ea3f
icon-arrow-right2\ea3e
icon-arrow-up-left2\ea3b
icon-arrow-down-left2\ea41
icon-arrow-left2\ea42
icon-circle-down\ea45
icon-circle-up\ea43
icon-circle-right\ea44
icon-circle-left\ea46

SNS・ソフトウエア関連 記号

アイコン 見本class名(エディターで使う)code名(cssなどで使う)
icon-amazon\ea88
icon-google\ea89
icon-google2\ea8a
icon-google-plus\ea8c
icon-google-plus2\ea8d
icon-google-drive\ea90
icon-facebook\ea91
icon-facebook2\ea92
icon-instagram\ea93
icon-twitter\ea97
icon-youtube\ea9e
icon-vimeo\eaa1
icon-vimeo2\eaa2
icon-flickr\eaa4
icon-flickr2\eaa5
icon-flickr3\eaa6
icon-flickr4\eaa7
icon-dropbox\eaaf
icon-onedrive\eab0
icon-github\eab1
icon-basecamp\eab3
icon-trello\eab4
icon-wordpress\eab5
icon-ello\eab7
icon-tumblr\eaba
icon-tumblr2\eabb
icon-yahoo\eabc
icon-yahoo2\eabd
icon-appleinc\eabf
icon-finder\eac0
icon-android\eac1
icon-windows\eac2
icon-skype\eac6
icon-wikipedia\eac9
icon-linkedin2\eaca
icon-linkedin\eacb
icon-pinterest2\ead2
icon-pinterest\ead3
icon-chrome\eada
icon-firefox\eadb
icon-IE\eadc
icon-edge\eadd
icon-safari\eade
icon-opera\eadf
icon-codepen\eae9
icon-hatenabookmark\e904
icon-line\e90b

その他 アイコン

アイコン 見本class名(エディターで使う)code名(cssなどで使う)
icon-office\e909
icon-newspaper\e90a
icon-paint-format\e915
icon-film\e91c
icon-video-camera\e91d
icon-pacman\e91f
icon-spades\e920
icon-clubs\e921
icon-diamonds\e922
icon-connection\e924
icon-mic\e927
icon-book\e928
icon-books\e929
icon-file-empty\e92d
icon-files-empty\e92e
icon-file-text2\e92f
icon-file-music\e931
icon-file-play\e932
icon-file-video\e933
icon-file-zip\e934
icon-copy\e935
icon-paste\e936
icon-folder\e938
icon-folder-open\e939
icon-folder-plus\e93a
icon-folder-minus\e93b
icon-folder-download\e93c
icon-folder-upload\e93d
icon-tag\e93e
icon-price-tags\e93f
icon-barcode\e940
icon-qrcode\e941
icon-calculator\e949
icon-map\e954
icon-map2\e955
icon-alarm\e959
icon-bell\e95a
icon-stopwatch\e95b
icon-calendar\e95c
icon-printer\e95d
icon-keyboard\e95e
icon-display\e95f
icon-laptop\e960
icon-mobile\e961
icon-mobile2\e962
icon-tablet\e963
icon-spinner\e981
icon-spinner2\e982
icon-spinner3\e983
icon-zoom-in\e98e
icon-zoom-out\e98f
icon-key\e994
icon-key2\e995
icon-lock\e996
icon-unlocked\e997
icon-cog\e99b
icon-pie-chart\e9a0
icon-gift\e9a5
icon-cup\e9a8
icon-spoon-knife\e9a9
icon-fire\e9af
icon-bin\e9b2
icon-bin2\e9b3
icon-briefcase\e9b4
icon-airplane\e9b5
icon-truck\e9b6
icon-road\e9b7
icon-sphere\e9ca
icon-earth\e9cb
icon-sun\e9d5
icon-contrast\e9d6
icon-brightness-contrast\e9d7
icon-star-empty\e9d8
icon-star-half\e9d9
icon-star-full\e9da
icon-heart\e9db
icon-heart-broken\e9dc
icon-quotation\e9f8
icon-cross\ea11
icon-checkmark\ea12
icon-checkmark2\ea13
icon-checkbox-checked\ea53
icon-checkbox-unchecked\ea54
icon-radio-checked\ea55
icon-radio-checked2\ea56
icon-radio-unchecked\ea57
icon-scissors\ea5b
icon-filter\ea5c

Ad
IcoMoonのクラス名とコード名
最新情報をチェックしよう!