フォント
1000個以上のユニークなアイコンフォントが使える「Unicons」
2019年05月19日 9:00
おはようございます！社員Aです👩
今回は1000個以上のユニークなアイコンフォントが使える「Unicons」を紹介したいと思います。
もくじ
アイコンフォントはFont awesomeだけじゃない！
アイコンフォントで定番のFont awesomeは、利用者も多く私も業務で日常的に使用しています。
CDNを読み込むだけで、アイコンをフォントのように扱うので大きさや色など自由自在に変えられることが魅力ですね。
Font awesomeについては、今までにいくつかまとめているので過去記事をご覧ください！
使いやすさと知名度からFont awesomeを使う方が多いかと思いますが、今回はユニークなアイコンフォントが1000種類以上も揃っている「Unicons」にフォーカスして紹介していきたいと思います。
手書きのようなアイコンが勢揃いの「Unicons」
Font awesomeは定番のアイコンやかっちりとしたシンプルなアイコンが多いのに対し、Uniconsではシンプルマークなのに丸みがあって可愛らしい印象です。
例えば吹き出しも、角丸で優しい印象を与えてくれます。
吹き出しのアイコン例
サイトのデザインでFont Awesomeのアイコンを使うと少し堅苦しい印象になってしまうときに、こちらの「Unicons」が活躍します。
「Unicons」の使い方
それでは早速「Unicons」を使ってみましょう。基本的にはFont Awesomeと同様で、CDNを読み込んでアイコンを指定する流れになります。
STEP1.サイトにCDNを読み込む
まずは、公式サイトで提供されているCDNをサイトの<head>〜<head>間に読み込みます。
配布先は下記になります。
STEP2.使いたいアイコンフォントを探す
次に、使いたいアイコンフォントを探しましょう。探し方は下記の2通りです。
- キーワード（英語）で検索する
- カテゴリから絞り込む
キーワード（英語）で検索する
キーワードで検索すると、関連のあるアイコンが表示されます。
カテゴリから絞り込む
サイドにあるカテゴリからもアイコンを絞り込むことができます。
STEP3.アイコンのコードをコピーする
使いたいフォントが見つかったら、フォントをクリックすることでコードやSVGのダウンロードボタンが表示されます。
デザインで使用する場合は一番右側の「SVG」からダウンロードしましょう。
コーディング上で使用する場合は、下記のどちらかをコピペし、使用します。
- Mark up（<i>形式）
- CDN（SVGのURL）
各種ソフトで使える拡張機能も提供されています
「Unicons」では、サイト上で探してダウンロードする手間を防ぐため、Icondropプラグインをダウンロードして各種ソフト上で使用することができます。
PhotoshopやIllustrator、AdobeXDを始め、Word・Powerpointなどでも使用できるのが嬉しいですね。
まとめ
WEB上でサクッと使えるフォントアイコン「Unicons」を紹介しました。
使い方も非常にシンプルで分かりやすく、Font Awesomeには無いような丸みのある可愛らしいフォントが1000種類以上も揃っていました。
うまく使い分けすると、よりサイトのクオリティが上がりそうです。
これから「Unicons」も使っていきたいと思います！
関連記事
この記事を書いた人
社員A
入社8年目。フロントエンドエンジニア・デザイナーの社員Aです。 小動物が好きで、デグー・チンチラと暮らしています！トレンドの情報を発信できるようにがんばります☺
