簡単！便利なフォントアイコン「UTF-8 Icons」。使い方とアイコン集まとめ。

タグを書いて簡単にアイコンを設置できるものといえばfont Awesomeです。

以前「1分でCSSから簡単にアイコン表示！font awesomeが素晴らしい！」でも記事で書いてみました。
種類も多いし超絶便利なfont awesomeなんですが、「CSSファイルを読み込むってなに？」「どこに読み込みファイルを書けばいいの？」という人にとってはもしかすると面倒なのかもしれません。

しかしご心配なく。
font Awesomeでも簡単なのに更に簡単にしたフォントアイコン「UTF-8 Icon」があります。
使い方なんてありません。

だって文字コードをポンっと置くだけでアイコンを設置できるのですから。

UTF-8のフォントアイコンを使ってみる。

UTF-8のフォントアイコンとはUTF-8で読み込まれたファイルに対してUTF-8コードを入力すればフォントアイコンとして表示することができます。

例えば、
✓　チェックマーク
❤ ハート
©　コピーライト
　スマートフォン？
✈　飛行機

とかとか。

使うには、ファイルがUTF-8であれば飛行機の場合

✓

の文字コードを入れるだけでアイコンが表示されます！
なんと便利な！

UTF-8のフォントアイコンを探す方法

UTF-8のフォントアイコンは数多くの種類があるので、使いたいアイコンを見つけたい時はutf-8 iconsがオススメ。
参考リンク：utf-8 icons

サイトにはutf-8のフォントアイコンがずらっと並んでいて、使いたいフォントアイコンをクリックしたら、コードが表示されます。



このコードをコピペして貼り付ければOK。

またCSSのbeforeやafter時に使うcontentに関しては、HTMLではなくCSSのコードを貼り付ければutf-8のフォントアイコンが使えます。

では最後に僕がよく使うフォントアイコンをまとめてみました。
コピペだけで使えるのでご参考あれ。

(HTMLは使用する場合はコードの前に&マークを付けてください。)
例：#10003;→[&]#10003;

アイコン	HTML	CSS
✓	#10003;	content: ‘\ \2713’;
★	#9733;	content: ‘\ \2605’;
✖	#10006;	content: ‘\ \2716’;
✉	#9993;	content: ‘\ \2709’;
↔	#8596;	content: ‘\ \2194’;
↕	#8597;	content: ‘\ \2195’;
↘	#8600;	content: ‘\ \2198’;
⇫	#8683;	content: ‘\ \21EB’;
▤	#9636;	content: ‘\ \25A4’;
◴	#9716;	content: ‘\ \25F4’;
☂	#9730;	content: ‘\ \2602’;
☁	#9729;	content: ‘\ \2601’;
☀	#9728;	content: ‘\ \2600’;
☎	#9742;	content: ‘\ \260E’;
⚑	#9873;	content: ‘\ \2691’;
⚙	#9881;	content: ‘\ \2699’;
⚠	#9888;	content: ‘\ \26A0’;
⛁	#9921;	content: ‘\ \26C1’;

最新投稿された記事はいかがですか？

• 南野どうなる?2015年冬から4大リーグにいったザルツブルクの選手をリストアップ！
• 毎日25分のオンライン中国語レッスンサイトまとめ。結構サイトによって金額と時間が違ってます。
• 中国語で覚えておきたい接続詞まとめ。
• [サッカーまとめ]2007-2016に欧州のクラブチームに移籍して日本人選手リスト。