無料でシンプルなアイコンを設置できる「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と比べると大幅に少ないものの、全て無料で使えて設置方法も簡単なので今後使っていきたいところ。
関連記事
- 
					
													  
- 
					Leafletでマップ上に通知(トースト)機能を追加する方法(Leaflet.Notifications)Leafletでマーカー内のボタンクリック時等、ユーザーが何らかのアクションを行 ... 
- 
					
													  
- 
					バニラJavaScriptでリッチなセレクトメニュー(プルダウン)を実装できる「Choices.js」の利用方法サジェストや複数選択等、機能付きのセレクトメニュー(プルダウン)を実装する際、今 ... 
- 
					
													  
- 
					jQueryにて指定した要素を検索条件から除外するnot()の利用方法あるソースコードを拝見しているとjQueryでnot()という使ったことの無いメ ... 
- 
					
													  
- 
					横スクロール可能な要素を視覚的に分かりやすくする「ScrollHint」ライブラリの利用方法横長のtableを設置し、CSSのoverflowで横スクロール可能にしてもユー ... 
- 
					
													  
- 
					IE11でフォーム送信時に二重登録されるInternet Explorer11でform送信時にデータが二重登録されると ...