アイコンの画像をダウンロードせずともウェブページにアイコンの画像を追加する方法をまとめました。Feather（フェザー）は、無料かつ商用で利用可能なSVGのアイコンをまとめたものです。
目次
Feather公式サイト
下記リンクはFeatherの公式サイトのリンクです。
公式サイトでは、アイコンの画像データを一括ダウンロードできるほか、各アイコンをクリックして個別にダウンロードすることができます。
また、Featherはアイコンのデータをダウンロードしなくても、サーバー上にあるFeatherのアイコンデータを読み込むことでウェブサイト上にアイコンを挿入することができます。
Featherアイコンをウェブサイトに挿入する
Featherのアイコンをウェブサイトで使うには以下の二つの方法があります。
- アイコンの画像データをダウンロードしてサイトに表示させる
- サーバーにあるアイコンのデータをウェブサイトに紐づけて表示させる
データをダウンロードせずにFeatherアイコンをウェブサイトに挿入するには以下の手順で行います。
- サーバー上のFeatherアイコンのデータをHTMLファイルに紐づける
- HTMLタグ内に、data-feather=”twitter”などの記述を行う
１．まず、下記のコードをHTMLファイルの<body>タグ内に記述します。
<script src="https://unpkg.com/feather-icons"></script>こうすることで任意の場所にFeatherアイコンをウェブサイトに表示することが可能になります。
２．以下のコードのようにFeatherアイコンについて記述します。
<i
data-feather="twitter"></i>この例では、Twitterのアイコンがサイト上に表示されます。”twitter”にあたる部分にアイコンの名称を代入することで様々なアイコンを使用可能です。
Featherアイコンの種類
Featherのアイコンは、2022年2月時点で286種類あります。下記リンク先の公式サイトへアクセスし、アイコンの種類を確認しましょう。
Featherアイコンの用途
以下の用途で使用可能です。
- 文章に装飾を施すとき
- 説明にイメージを加えるとき
- SNSのリンクボタンを設置するとき
- 他
まとめ
SNSリンクのボタンをホームページに設置したり、ランディングページにアイコンを使う際にFeatherアイコンはとても便利です。必要に応じて利用しましょう。