オープンソースのシンプルなアイコン Feather

カテゴリ:  Tech タグ:  blogging icon

Feather - Simple Beautiful Open Souce Icon

いつも読ませていただいている Konamikanさんの「 unsweetsを3にした 」の記事で紹介されていたオープンソースのアイコン Feather を Font Awesomeに替えてこのブログに 適用してみました。

こんな感じになっているはずです。

Featherアイコン

Feather アイコン

確かに、シンプルでいい感じです。

Featherの適用方法

適用は、 Featherの README.md のガイドのままですが、以下の3つのステップで完了です。

  1. ヘッダでCDNからスクリプトを読み込むよう追加

  2. <i>エレメントで表示したいアイコンを指定する。アイコンについては、

    Feather のサイトで確認できます。

  3. ページ末で、feather.replace() を呼びだす。

<!DOCTYPE html>
<html>
  <title>Hogehoge</title>
  <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script>
  <body>
    <article>
      <section>
        Twitterのアイコンだよ。
        <i data-feather="twitter"></i>
      </section>
    </article>
    <script>
      feather.replace()
    </script>
  </body>
</html>

今回は使用しているNikolaのテーマに手を入れて対応させました。

コメント

Comments powered by Disqus