FontAwesome

参考

Font Awesome [Official]

アイコン一覧/検索

参考

Icons | Font Awesome [Official]

書き方

i タグにクラスを付与して記述する。

<i class="fas fa-cloud-sun"></i>

見本

参考

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>

見本

参考

Stacking Icons | Font Awesome [Official]

パッケージを使う

参考

Using a Package Manager | Font Awesome [Official]

サーバーにアップロードして使う

参考

Hosting Font Awesome Yourself | Font Awesome [Official]

CDN

参考

Start | Font Awesome [Official]

Pro Plan

参考

Plans & Pricing | Font Awesome [Official]

疑似要素

参考

CSS Pseudo-Elements | Font Awesome [Official]

カラー

参考

Font Awesome Icons with Brand Color Variables | Hura Tips

Font Awesome Colored – Brand And Social Icons | CodePen

移行

参考

Upgrading from Version 4 to 5 | Font Awesome [Official]

Upgrade process for fontawesome from 4 to 5 – Stack Overflow

バージョン 6

参考

Font Awesome v6.0 [Official]

Quick Start | Font Awesome v6.0 Docs [Official]

ブランドアイコン

参考

Brand Icons | Font Awesome [Official]

まとめ/チートシート

参考

Cheatsheet | 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

参考

bokmann/font-awesome-rails: the font-awesome font bundled as an asset for the rails asset pipeline – GitHub

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 へ | 株式会社ネディア

FontAwesomeIconFactory

参考

nschum/FontAwesomeIconFactory: A factory for turning Font Awesome icons into images for user interface controls. Works for iOS and OS X. – GitHub

記事をシェアする:

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です