勉強したことのメモ

Webエンジニア / プログラマが勉強したことのメモ。

無料でシンプルなアイコンを設置できる「Feather」の利用方法

  JavaScript

ページ上にアイコンを表示したい場合Font Awesomeを使うことが多いが、個人的には「バージョンによる違いの問題」「無料版アイコンが少ない」「アイコンが探しづらい」等の問題により使いづらかったりする。調べたところ「Feather」が良さそう。以下にサンプルと実装方法をメモ。

 

Feather

公式サイト

https://feathericons.com/

GitHub

https://github.com/feathericons/feather

CDN

CDNで使う場合は以下を記述する。

<script src="https://unpkg.com/feather-icons"></script>
<script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script>

 

サンプル

https://taitan916.info/sample/feather/

 

利用方法

ソースコード

<i data-feather="alert-circle"></i>
<i data-feather="youtube"></i>
<i data-feather="star"></i>
<script src="https://unpkg.com/feather-icons"></script>
<script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script>
<script>
const option = {
    width: '20px', //横幅
    height: '20px', //縦幅
    stroke: '#ccc', //カラー
}
feather.replace(option);
</script>

解説等

公式サイトから使用したいアイコンを探してdata-feather属性に記述し、JavaScript側で以下を実行するとアイコンが表示される筈。

feather.replace(option);

 

所感

アイコン数はFont Awesomeと比べると大幅に少ないものの、全て無料で使えて設置方法も簡単なので今後使っていきたいところ。

 - JavaScript

  関連記事

JavaScriptのIntersectionObserverを利用して指定した要素が表示されているか確認する方法

ブラウザ上で指定した要素が表示されているかチェックし、表示されている場合は何らか ...

formで複数選択可能なセレクトメニュー(プルダウン)を実装する方法(select2)

フォームで複数選択可能なセレクトボックス(プルダウン)を実装したい。ただHTML ...

Leafletで「leaflet-search」プラグインを導入してマーカーの検索機能を追加する方法

LeafletとOpenStreetMapでマップ上にマーカーを複数設置した上で ...

Javascript / jQueryにて特定の要素内の文字数が〇文字以上の場合に丸める方法

サイトの特定の要素内の文字数が〇文字以上の場合に「コンテンツコンテ……」のように ...

jQueryにて指定した要素の親要素を削除する方法

jQueryにて指定した要素の親要素を削除したいケースがあった。通常の場合だと親 ...