ワードプレスの有料テーマ 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 |