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