FontAwesome
公式サイト:
導入
参考:
Get Started | Font Awesome Docs [Official]
アイコン一覧/検索
→ Icons
参考:
Icons | Font Awesome [Official]
書き方
i
タグにクラスを付与して記述する。
<i class="fas fa-cloud-sun"></i>
Code language: HTML, XML (xml)
見本:
参考:
Basic Use | Font Awesome [Official]
アイコンを重ねる
span
要素に fa-stack
クラスを付与し、中にアイコンを二つ入れる。
<span class="fa-stack">
<i class="fas fa-circle fa-stack-2x"></i>
<i class="fab fa-font-awesome-flag fa-stack-1x fa-inverse"></i>
</span>
Code language: HTML, XML (xml)
見本:
参考:
Stacking Icons | Font Awesome [Official]
パッケージを使う
参考:
Using a Package Manager | Font Awesome Docs [Official]
サーバーにアップロードして使う
参考:
Host Yourself – Web Fonts | Font Awesome Docs [Official]
Host Yourself – SVG + JS | Font Awesome Docs [Official]
Hosting Font Awesome Yourself (v5) | Font Awesome [Official]
CDN
参考:
Get Font Awesome Free | Font Awesome [Official]
Pro Plan
参考:
Plans & Pricing | Font Awesome [Official]
疑似要素
参考:
CSS Pseudo-Elements | Font Awesome Docs [Official]
カラー
参考:
Font Awesome Icons with Brand Color Variables | Hura Tips
Font Awesome Colored – Brand And Social Icons | CodePen
移行
参考:
Upgrade to Version 6 | Font Awesome Docs [Official]
Upgrade from Version 4 to 5 | Font Awesome Docs [Official]
Upgrade process for fontawesome from 4 to 5 – Stack Overflow
バージョン
参考:
Versions | Font Awesome [Official]
ブランドアイコン
参考:
Brand Icons | Font Awesome [Official]
まとめ/チートシート
参考:
Cheatsheet v5 | Font Awesome [Official]
リポジトリ
FortAwesome/Font-Awesome: The iconic SVG, font, and CSS toolkit – GitHub
npm
入手:
@fortawesome/fontawesome-free – npm
FontAwesome 4.7
参考:
Font Awesome Icons v.4.7 [Official]
Examples | Font Awesome v4.7 [Official]
FortAwesome/Font-Awesome at fa-4 – GitHub
Font Awesome 4.x のアイコンの class 名を確認するときのページ | FlipClap
font-awesome-sass
リポジトリ:
FortAwesome/font-awesome-sass: Font-Awesome Sass gem for use in Ruby/Rails projects – GitHub
参考:
Incompatible with sassc-rails · Issue #112 · FortAwesome/font-awesome-sass – GitHub
Use sassc for 4.7.0 by p8 · Pull Request #172 · FortAwesome/font-awesome-sass – GitHub
font-awesome-rails
リポジトリ:
fontawesome-4-to-5
リポジトリ:
giovdi/fontawesome-4-to-5: A small Python tool to migrate from FontAwesome 4 to 5 – GitHub
Fork Awesome
公式サイト:
Fork Awesome – A Fork of the Iconic Font and CSS Toolkit [Official]
リポジトリ:
ForkAwesome/Fork-Awesome: A Fork of the Iconic Font and CSS Toolkit – GitHub
参考:
Get Started | Fork Awesome [Official]
Web アイコンフォント Font Awesome 4.7 から Fork Awesome へ | 株式会社ネディア
FontAwesome Icon Factory
公式サイト:
リポジトリ: