みなさん、こんにちは！
突然ですが「とりあえずFont Awesome入れておくか」ってなってませんか？
アイコンの数も多くデザイン的にも便利かも知れませんが、他にも無料のWebアイコンフォントはあります！
なので今回はおすすめの無料Webアイコンフォントたちを紹介します！
この記事の目次
Webアイコンフォントってなに？
Webアイコンフォントとは、Webフォントのアイコン版です。
HTMLタグを挿入するだけでアイコンが表示されます。
画像で貼り付けているのではなくフォントとして表示するという特徴があるので、画質に左右されることありませんし、色や大きさもCSSで調節できます。
おすすめのWebアイコンフォント5選
それでは早速おすすめのWebアイコンフォントを10個紹介します。
順不同で紹介していきますのでお好みのWebアイコンフォントを選んでください！
詳しい使用方法は他サイト様のリンクを貼らせて貰っています。
Font Awesome
とはいっても結局のところ使いやすく、一番の有名どころといって間違いない「Font Awesome」です。
豊富なアイコンの数が魅力的です。
詳しい使用方法は下記を参考ください。
Line Awesome
上記の「Font Awesome」をモダンな感じに作り直してくれたいいヤツ「Line Awesome」です。
「Font Awesome」同様種類が多く、また線が細いのでキレイめなサイトで活躍してくれそうです。
詳しい使用方法は下記を参考ください。
Material Icons
Googleが提供しているマテリアルデザインキットのWebアイコンフォントです。マテリアルデザインに合うようスタイルも4つ用意されています。
さらにそのWebアイコンフォントが約900種類も用意されています。
詳しい使用方法は下記を参考ください。
Ionicons
こちらのアイコンの特徴はマテリアルスタイルとiOSのスタイルの2つが用意されている点です。
なのでWebだけでなくネイティブのアプリでも活躍してくれます。
詳しい使用方法は下記を参考ください。
Foundation Icon Fonts 3
CSSフレームワークで有名な「Foundation」にあったスタイルで構成されたWebアイコンフォントです。
「Foundation」を使用されている方はこちらを選択するのがベターだと思います。
詳しい使用方法は下記を参考ください。
Feathericons
282個のSVGアイコンを提供している「Feathericons」です。
npmでインストールしSVGのアイコンとして使用できます。
詳しい使用方法は下記を参考ください。
またおすすめのWebフォントも紹介していますので、合わせて読んでみてください！
