【商用利用可】スタイリッシュなアイコンフォント 「Themify Icons」

こんにちは、ワタナベです！

最近はまた休日引きこもりがちで、久しぶりにお台場に遊びに行きたいなと思う今日この頃です(;^ω^)

今回はWebサイトで使用できるアイコンのご紹介。

Themify Icons

 Themify  54 users

Themify Icons - 320+ Free Icons For Web Design & Apps

https://themify.me/themify-icons

A complete set of icons for use in web design and apps, consisting of 320+ pixel-perfect, hand-crafted icons that draw inspiration from Apple iOS 7.

こちらSVGとアイコンフォントの利用が可能です。

ライセンスはOFL、MITライセンス。
無料で個人利用、商用利用することが可能です。（DL時「readme.txt」を読みましょう！）

▼以下の記事がライセンスについて分かりやすく説明されていますので、ライセンスが？？？な方は是非。

 PINTO!  43 users

WEBサイト制作で見かけるライセンス周りのお話（デザイナー・エンジニア編） | PINTO!

https://service.plan-b.co.jp/blog/creative/10428/

突然ですが皆さん、ライセンスのお話はお好きでしょうか?何となく避けてしまいがちなライセンスのお話。私も含め多くのWeb制作に携わる方が「面倒くさい・多すぎて意味不明」などと思っていることでしょう。ぶっちゃけいいますと、特 …

サンプル

↑矢印のアイコンサンプル。
FontAwesomeよりも、細くシンプルでスタイリッシュな印象です。
Apple iOS7からインスピレーションを得ているそうです。

現在320個以上のアイコンを利用することができます。

アイコンフォントの使い方

まず「Themify Icons」のサイトからファイルをダウンロードしましょう。
「ICON FONT VERSION」の「DOWNLOAD ICON FONT」のボタンからDLできます。

DLできたら以下の手順です。

１ 指定ファイルのアップロード

• 「themify-icons.css」ファイル
• 「fonts」フォルダー

上記２つをサーバーへアップロードします。

２ CSS設置

<link href=”themify-icons.css” rel=”stylesheet”>

「themify-icons.css」ファイルを読み込みます。

３ アイコン設置

<span class = “使用したいアイコンの名前”> </ span>

↑でアイコンが表示できます。たとえば、

↑の「→」の矢印アイコンを使いたい場合、赤い下線部分のテキスト（アイコン名）を、

<span class = “ti-arrow-right“> </ span>

spanのclassに入れてやればよいのです。

また、::afterや::beforeでも表示させることが可能となっています。
こちらは「themify-icons.css」の中身または、「Themify Icons」のサイトでデベロッパーツールを確認して、contentに指定するコードを調べましょう。
「→」の矢印アイコンならcontent:”\e628″となります。

「Font Awesomeがアカウント登録が必要になって面倒だ」、「こってりとしたアイコンだとサイトデザインに合わない…」なんて時は是非試しにご利用してみてください(‘ω’)ノ

※注意点として、電話の受話器のアイコンが無いです。
代替えとして、モバイルのアイコンがありますが、スマートフォンの形なので求めているものとはちょっと違うかもしれません。

それではまた次回。

ご閲覧ありがとうございました！