https://fontawesome.com/

FontAwesomeを使うと幾らかの制限がありますが、だいぶ種類が豊富なアイコン・ピクトグラムの中からフリーで好きなものを使用することができます。webサービスやブログで手軽に使えるのがポイントです。

スクリーンショット 2018-04-24 0.17.10.png

webページのheadを編集

https://fontawesome.com/get-startedのページに具体的な方法は記述されています。

スクリーンショット 2018-04-24 0.19.33

上記の設定で<link>をコピーして、自身のブログまたはwebサービスの<head>に記述します。CDNを使う場合は最新のものが使えるがベータ版であるというのが注意書きされています。上記の方法でない場合はページの下の手動の方を選択してダウンロードします。

使いたいアイコンを使う

次は以下のように自分の気に入ったアイコンを検索して使用するものを決めます。

https://fontawesome.com/icons?d=gallery&q=search

今回はサーチアイコンを使います。

https://fontawesome.com/icons/search?style=solid

以下のように使用します。

スクリーンショット 2018-04-24 0.27.54.png

これをbodyに貼り付けるとアイコンが表示されるようになります。

ピクトグラム・アイコンの色をカスタムする

ここで表示されるアイコンは、色を変更することが可能です。以下のようにstyleでcolorを指定すればよいです。

赤く表示されるようになります。

<i class=”fas fa-search” style=”color:red”></i>

おわりに

フリーでここまで使えるのは本当に助かる。種類も十分にある。有料版を使わなくてもこれだけ使えれば感謝しかありませんね。