無料でシンプルなアイコンを設置できる「Feather」の利用方法
ページ上にアイコンを表示したい場合Font Awesomeを使うことが多いが、個人的には「バージョンによる違いの問題」「無料版アイコンが少ない」「アイコンが探しづらい」等の問題により使いづらかったりする。調べたところ「Feather」が良さそう。以下にサンプルと実装方法をメモ。
Feather
公式サイト
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にて数値の書式設定と操作を行える「Numerical.js」ライブラリの利用方法
以前JavaScriptで数値のカンマ区切り化とカンマ区切りの解除を行う方法をメ ...
-
-
バニラJS対応(jQuery非依存)の通知(トースト)系ライブラリ「Notyf」の利用方法
以前に通知(トースト)系ライブラリ「Toastr」の利用方法をメモしたが、こちら ...
-
-
JavaScriptの動画プレイヤー用ライブラリ「Plyr」の利用方法
先日JavaScriptの動画プレイヤー用ライブラリ「Video.js」を試した ...
-
-
CAPTCHAに代わる無料のツール「Cloudflare Turnstile」の導入方法
CAPTCHAと言えばGoogleのreCAPTCHAを思い浮かべるが、稀にCl ...
-
-
「input type="number"」のテキストボックスを桁数制限且つ半角数値のみ入力可にする方法
「input type="number"」のテキストボックスに対して「2桁まで」 ...