FontAwesome

公式サイト:

Font Awesome [Official]

導入

参考:

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

リポジトリ:

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

FontAwesome Icon Factory

公式サイト:

FontAwesome Icon Factory

リポジトリ:

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

記事をシェアする:

コメントを残す

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

Protected by reCAPTCHA