アイコンのUnicode498種[TheThor][WordPress]

ワードプレスのテーマTHETHORでは標準で498種のアイコンを使用することができます。ただ、普通に使っているだけでは、ページに挿入することしかできません。

CSSでもアイコンを指定することができるといいなあと思いませんか？

何かをインストールしたり、アップロードしたり、難しいことや面倒な作業を必要とせずにCSSの疑似要素などでアイコンを指定することが可能です。

このページでは、ザ・トールの機能の一つ「簡単に挿入できるアイコン」を、CSSで使うためのUnicodeを掲載しています。

このページの活用方法は記事の最後にありますので、初めての方はそちらもお読みくださいね。

アイコン画像一覧

10行×4列を１つのブロックとして、３ブロックずつ掲載しています（詳しい説明はこの記事の最後にあります）。

　基本アイコン1～30

　基本アイコンコード1～10

●1-1 "\e9f8" ●1-2 "\eaf1" ●1-3 "\e90a" ●1-4 "\e90c" ●2-1 "\e90d" ●2-2 "\e90e" ●2-3 "\e911" ●2-4 "\e912" ●3-1 "\e913" ●3-2 "\e914" ●3-3 "\e915" ●3-4 "\e916" ●4-1 "\e917" ●4-2 "\e91c" ●4-3 "\e91e" ●4-4 "\e923" ●5-1 "\e928" ●5-2 "\e929" ●5-3 "\e943" ●5-4 "\e948" ●6-1 "\e94a" ●6-2 "\e94b" ●6-3 "\e94c" ●6-4 "\e94d" ●7-1 "\e91a" ●7-2 "\e91b" ●7-3 "\e91f" ●7-4 "\e920" ●8-1 "\e921" ●8-2 "\e922" ●8-3 "\e9db" ●8-4 "\e9dc" ●9-1 "\e9d8" ●9-2 "\e9d9" ●9-3 "\e9da" ●9-4 "\e924" ●10-1 "\e925" ●10-2 "\e926" ●10-3 "\e92b" ●10-4 "\e92f"

　基本アイコンコード11～20

●11-1 "\e92c" ●11-2 "\e92d" ●11-3 "\e92e" ●11-4 "\e930" ●12-1 "\e931" ●12-2 "\e932" ●12-3 "\e933" ●12-4 "\e934" ●13-1 "\e935" ●13-2 "\e936" ●13-3 "\e937" ●13-4 "\e938" ●14-1 "\e939" ●14-2 "\e93a" ●14-3 "\e93b" ●14-4 "\e93c" ●15-1 "\e93d" ●15-2 "\e93e" ●15-3 "\e93f" ●15-4 "\e940" ●16-1 "\e941" ●16-2 "\e942" ●16-3 "\e944" ●16-4 "\e945" ●17-1 "\e946" ●17-2 "\e947" ●17-3 "\e949" ●17-4 "\e94f" ●18-1 "\e950" ●18-2 "\e951" ●18-3 "\e954" ●18-4 "\e955" ●19-1 "\e956" ●19-2 "\e957" ●19-3 "\e958" ●19-4 "\e959" ●20-1 "\e95a" ●20-2 "\e95b" ●20-3 "\e95c" ●20-4 "\e965"

　基本アイコンコード21～30

●21-1 "\e966" ●21-2 "\e967" ●21-3 "\e968" ●21-4 "\e96b" ●22-1 "\e96c" ●22-2　 "\e96d" ●22-3 "\e980" ●22-4 "\e98e" ●23-1 "\e98f" ●23-2 "\e990" ●23-3 "\e992" ●23-4 "\e991" ●24-1 "\e993" ●24-2 "\e994" ●24-3 "\e995" ●24-4 "\e996" ●25-1 "\e997" ●25-2 "\e998" ●25-3 "\e999" ●25-4 "\e99a" ●26-1 "\e99c" ●26-2 "\e9ae" ●26-3 "\e99d" ●26-4 "\e99e" ●27-1 "\e99f" ●27-2 "\e9a0" ●27-3 "\e9a1" ●27-4 "\e9a2" ●28-1 "\e9a3" ●28-2 "\e9a4" ●28-3 "\e9a5" ●28-4 "\e9a6" ●29-1 "\e9a7" ●29-2 "\e9ac" ●29-3 "\e9ad" ●29-4 "\e9af" ●30-1 "\e9b0" ●30-2 "\e9b1" ●30-3 "\e9b2" ●30-4 "\e9b3"

　基本アイコン31～60

　基本アイコンコード31～40

●31-1 "\e9b4" ●31-2 "\e9ba" ●31-3 "\e9b7" ●31-4 "\e9bb" ●32-1 "\e9bd" ●32-2 "\e9bc" ●32-3 "\e9c0" ●32-4 "\e9c1" ●33-1 "\ea51" ●33-2 "\e910" ●33-3 "\ea8e" ●33-4 "\eaea" ●34-1 "\eaeb" ●34-2 "\ea9f" ●34-3 "\e900" ●34-4 "\e90f" ●35-1 "\e952" ●35-2 "\e953" ●35-3 "\e977" ●35-4 "\ea84" ●36-1 "\ea52" ●36-2 "\e98c" ●36-3 "\e907" ●36-4 "\e98d" ●37-1 "\e99b" ●37-2 "\e9a8" ●37-3 "\e9a9" ●37-4 "\e9aa" ●38-1 "\e9b8" ●38-2 "\e9b9" ●38-3 "\e9be" ●38-4 "\e9bf" ●39-1 "\e9c2" ●39-2 "\e9c3" ●39-3 "\e9c4" ●39-4 "\e9c5" ●40-1 "\e969" ●40-2 "\e9c6" ●40-3 "\e9c8" ●40-4 "\e96a"

　基本アイコンコード41～50

●41-1 "\e9c7" ●41-2 "\e9c9" ●41-3 "\e9ca" ●41-4 "\e9cb" ●42-1 "\e9cc" ●42-2 "\e9cd" ●42-3 "\e9ce" ●42-4 "\e9cf" ●43-1 "\e9d0" ●43-2 "\e9d1" ●43-3 "\e9d2" ●43-4 "\e9d3" ●44-1 "\e9d4" ●44-2 "\e9d5" ●44-3 "\e9d6" ●44-4 "\e9d7" ●45-1 "\ea09" ●45-2 "\ea0a" ●45-3 "\ea0b" ●45-4 "\ea0c" ●46-1 "\ea0d" ●46-2 "\ea0e" ●46-3 "\ea0f" ●46-4 "\ea10" ●47-1 "\ea11" ●47-2 "\ea12" ●47-3 "\ea13" ●47-4 "\ea14" ●48-1 "\ea15" ●48-2 "\ea16" ●48-3 "\ea47" ●48-4 "\ea48" ●49-1 "\ea49" ●49-2 "\ea4a" ●49-3 "\ea4b" ●49-4 "\ea4c" ●50-1 "\ea4d" ●50-2 "\ea4e" ●50-3 "\ea4f" ●50-4 "\ea50"

　基本アイコンコード51～60

●51-1 "\eaec" ●51-2 "\eaed" ●51-3 "\eaee" ●51-4 "\ea53" ●52-1 "\ea54" ●52-2 "\ea55" ●52-3 "\ea56" ●52-4 "\ea57" ●53-1 "\ea58" ●53-2 "\ea59" ●53-3 "\ea5a" ●53-4 "\ea5b" ●54-1 "\ea5c" ●54-2 "\ea5d" ●54-3 "\ea5e" ●54-4 "\ea5f" ●55-1 "\ea60" ●55-2 "\ea61" ●55-3 "\ea62" ●55-4 "\ea63" ●56-1 "\ea64" ●56-2 "\ea65" ●56-3 "\ea66" ●56-4 "\ea67" ●57-1 "\ea68" ●57-2 "\ea69" ●57-3 "\ea6a" ●57-4 "\ea6c" ●58-1 "\ea6b" ●58-2 "\ea6d" ●58-3 "\ea6e" ●58-4 "\ea6f" ●59-1 "\ea70" ●59-2 "\ea71" ●59-3 "\ea72" ●59-4 "\ea73" ●60-1 "\ea74" ●60-2 "\ea75" ●60-3 "\ea76" ●60-4 "\ea77"

　基本アイコン61～65、建物・乗り物アイコン1～2、読込・AV機器アイコン1～6

　基本アイコンコード61～65

●61-1 "\ea78" ●61-2 "\ea79" ●61-3 "\ea7a" ●61-4 "\ea7b" ●62-1 "\ea7c" ●62-2 "\ea7d" ●62-3 "\ea7e" ●62-4 "\ea83" ●63-1 "\ea7f" ●63-2 "\ea80" ●63-3 "\ea81" ●63-4 "\ea82" ●64-1 "\ea8b" ●64-2 "\eaef" ●64-3 "\ea85" ●64-4 "\ea86" ●65-1 "\eaf0" ●65-2 "\e94e"

　建物・乗り物アイコンコード1～2

●1-1 "\e908" ●1-2 "\e906" ●1-3 "\e905" ●1-4 "\e909" ●2-1 "\e92a" ●2-2 "\e9ab" ●2-3 "\e9b5" ●2-4 "\e9b6"

　読込・AV機器アイコンコード1～6

●1-1 "\ea30" ●1-2 "\e981" ●1-3 "\e982" ●1-4 "\e983" ●2-1 "\e984" ●2-2 "\e985" ●2-3 "\e986" ●2-4 "\e987" ●3-1 "\e988" ●3-2 "\e989" ●3-3 "\e98a" ●3-4 "\e98b" ●4-1 "\e95f" ●4-2 "\e960" ●4-3 "\e961" ●4-4 "\e962" ●5-1 "\e963" ●5-2 "\e964" ●5-3 "\e918" ●5-4 "\e919" ●6-1 "\e91d" ●6-2 "\e927" ●6-3 "\e95d" ●6-4 "\e95e"

　オーディオ系アイコン1～7、人・顔アイコン1～12

　オーディオ系アイコンコード1～7

●1-1 "\ea17" ●1-2 "\ea1e" ●1-3 "\ea18" ●1-4 "\ea1f" ●2-1 "\ea19" ●2-2 "\ea20" ●2-3 "\ea1a" ●2-4 "\ea25" ●3-1 "\ea1b" ●3-2 "\ea26" ●3-3 "\ea1c" ●3-4 "\ea21" ●4-1 "\ea23" ●4-2 "\ea1d" ●4-3 "\ea22" ●4-4 "\ea24" ●5-1 "\ea27" ●5-2 "\ea28" ●5-3 "\ea29" ●5-4 "\ea2a" ●6-1 "\ea2b" ●6-2 "\ea2c" ●6-3 "\ea2d" ●6-4 "\ea2e" ●7-1 "\ea2f" ●7-2 "\ea31" ●7-3 "\ea32"

　人・顔アイコンコード1～10

●1-1 "\e97a" ●1-2 "\e97b" ●1-3 "\e97c" ●1-4 "\e97d" ●2-1 "\e97e" ●2-2 "\e97f" ●2-3 "\e9dd" ●2-4 "\e9de" ●3-1 "\e9df" ●3-2 "\e9e0" ●3-3 "\e9e1" ●3-4 "\e9e2" ●4-1 "\e9e3" ●4-2 "\e9e4" ●4-3 "\e9e5" ●4-4 "\e9e6" ●5-1 "\e9e7" ●5-2 "\e9e8" ●5-3 "\e9e9" ●5-4 "\e9ea" ●6-1 "\e9eb" ●6-2 "\e9ec" ●6-3 "\e9ed" ●6-4 "\e9ee" ●7-1 "\e9ef" ●7-2 "\e9f0" ●7-3 "\e9f1" ●7-4 "\e9f2" ●8-1 "\e9f3" ●8-2 "\e9f4" ●8-3 "\e9f5" ●8-4 "\e9f6" ●9-1 "\e9f7" ●9-2 "\e9f9" ●9-3 "\e9fa" ●9-4 "\e9fb" ●10-1 "\e9fc" ●10-2 "\e9fd" ●10-3 "\e9fe" ●10-4 "\e9ff"

　人・顔アイコンコード11～12

●11-1 "\ea00" ●11-2 "\ea01" ●11-3 "\ea02" ●11-4 "\ea03" ●12-1 "\ea04"

　矢印・コメントアイコン1～9、ロゴアイコン1～20

　矢印・コメントアイコンコード1～9

●1-1 "\ea05" ●1-2 "\ea06" ●1-3 "\ea07" ●1-4 "\ea08" ●2-1 "\ea33" ●2-2 "\ea3b" ●2-3 "\ea34" ●2-4 "\ea3c" ●3-1 "\ea35" ●3-2 "\ea3d" ●3-3 "\ea36" ●3-4 "\ea3e" ●4-1 "\ea37" ●4-2 "\ea3f" ●4-3 "\ea38" ●4-4 "\ea40" ●5-1 "\ea39" ●5-2 "\ea41" ●5-3 "\ea3a" ●5-4 "\ea42" ●6-1 "\ea43" ●6-2 "\ea44" ●6-3 "\ea45" ●6-4 "\ea46" ●7-1 "\e96e" ●7-2 "\e970" ●7-3 "\e972" ●7-4 "\e973" ●8-1 "\e96f" ●8-2 "\e971" ●8-3 "\e974" ●8-4 "\ea87" ●9-1 "\e975" ●9-2 "\e976" ●9-3 "\e978" ●9-4 "\e979"

　ロゴアイコンコード1～10

●1-1 "\ea88" ●1-2 "\ea89" ●1-3 "\ea8a" ●1-4 "\ea8c" ●2-1 "\ea8d" ●2-2 "\ea8f" ●2-3 "\ea90" ●2-4 "\ea91" ●3-1 "\ea92" ●3-2 "\ea93" ●3-3 "\ea94" ●3-4 "\ea95" ●4-1 "\ea96" ●4-2 "\ea97" ●4-3 "\e901" ●4-4 "\e903" ●5-1 "\e904" ●5-2 "\e902" ●5-3 "\e90b" ●5-4 "\ea98" ●6-1 "\ea99" ●6-2 "\ea9a" ●6-3 "\ea9b" ●6-4 "\ea9c" ●7-1 "\ea9d" ●7-2 "\ea9e" ●7-3 "\eaa0" ●7-4 "\eaa1" ●8-1 "\eaa2" ●8-2 "\eaa3" ●8-3 "\eaa4" ●8-4 "\eaa5" ●9-1 "\eaa6" ●9-2 "\eaa7" ●9-3 "\eaa8" ●9-4 "\eaa9" ●10-1 "\eaaa" ●10-2 "\eaab" ●10-3 "\eaac●10-4 "\eaad"

　ロゴアイコンコード11～20

●11-1 "\eaae" ●11-2 "\eaaf" ●11-3 "\eab0" ●11-4 "\eab1" ●12-1 "\eab2" ●12-2 "\eab3" ●12-3 "\eab4" ●12-4 "\eab5" ●13-1 "\eab6" ●13-2 "\eab7" ●13-3 "\eab8" ●13-4 "\eab9" ●14-1 "\eaba" ●14-2 "\eabb" ●14-3 "\eabc" ●14-4 "\eabd" ●15-1 "\eabe" ●15-2 "\eabf" ●15-3 "\eac0" ●15-4 "\eac1" ●16-1 "\eac2" ●16-2 "\eac3" ●16-3 "\eac4" ●16-4 "\eac5" ●17-1 "\eac6" ●17-2 "\eac7" ●17-3 "\eac8" ●17-4 "\eac9" ●18-1 "\eacb" ●18-2 "\eaca" ●18-3 "\eacc" ●18-4 "\eacd" ●19-1 "\eace" ●19-2 "\eacf" ●19-3 "\ead0" ●19-4 "\ead1" ●20-1 "\ead3" ●20-2 "\ead2" ●20-3 "\ead4" ●20-4 "\ead5"

　ロゴアイコン21～25

　ロゴアイコンコード21～25

●21-1 "\ead6" ●21-2 "\ead7" ●21-3 "\ead8" ●21-4 "\ead9" ●22-1 "\eada" ●22-2 "\eadb" ●22-3 "\eadc" ●22-4 "\eadd" ●23-1 "\eade" ●23-2 "\eadf" ●23-3 "\eae0" ●23-4 "\eae1" ●24-1 "\eae2" ●24-2 "\eae3" ●24-3 "\eae4" ●24-4 "\eae5" ●25-1 "\eae6" ●25-2 "\eae7" ●25-3 "\eae8" ●25-4 "\eae9"

以上でアイコン一覧（全498種）は終了です。

アイコン一覧画面の見方と使い方

アイコン一覧画面の見方を簡単に説明します。詳しくは、アイコン一覧ページの説明箇所に詳しく記載していますのでそちらをお読みください。説明箇所を読む

コードを調べる手順

1. アイコンを選ぶ
2. 何行目にありますか？
3. 何列目にありますか？

1.アイコンを選ぶ

例えば「上から3行目」の「左から2番目」、アイコンを表示させたいとします。

2.何行目にある？

上の1で、すべて書いてしまっているような感じもしますが、上からの行数を見ます。具体的には、上の画像の水色のラインの数字を拾います。

3.何列目にある？

次に左からの列数を見ます。具体的には、上の画像の黄色いラインの数字を拾います。

4.コピーペースト

上の工程の2と3の数字をつなげると、「３－２」となるので、「●3-2」と記載されている右側のUnicodeをコピーペーストします。

ダブルクォーテーション「”」で囲われていますので、ダブルクォーテーションごとコピーペーストしても大丈夫ですし、UnicodeだけコピーペーストしてもOKです。

「３－２」の場所を見ると、

●3-2 "\e914"

とあるので、アイコンのUnicodeは「\e914」ということがわかります。

「￥」と「＼」

コードをコピーペーストしたとき、『Unicodeが違う』と気づくことがあります。

「＼」が表示されていたり、「￥」が表示されていたりして、どちらが正しいのか？Unicodeが間違っているのか？気になることがありますが、気にしないで大丈夫です。

いずれも正しい表示なので心配せずにそのままコピーペーストしてください。

詳しい説明は省きますが、「￥」と「＼」は、同じコードが降られているために起こる現象です。もし、気になる場合はその部分だけ打ち直してみてください。きっと、打ち込めずにどちらかの表示になると思います。

こんな感じで…。（以下参照）

例：筆者のビジュアル画面

筆者の編集中の画面です。「￥（円マーク）」が表示されています。

例：筆者のテキスト画面

筆者の編集中の画面です。「＼（バックスラッシュ）」が表示されています。

まとめ

ザ・トールにはアイコンがデフォルトで498種も搭載されています。アイコンは、記事内だけでなくCSSで指定することもできますが、Unicodeが必要です。

Unicodeをさっと調べるためのツールとしてお役に立てば幸いです。様々な形で使いこなしてくださいね。