Awesome

UnicodeEmojiAwesomeサイトマップホーム

Font Awesome はアイコンを文字として扱うことを可能にした文字のツールです。
Font Awesome のバージョン 5.9 以降を利用するにはアカウントを作成する必要があります。
ver5.8 以前は無料で利用可能です。また有料版もあります。

使い方は今までと同じ Web フォントとして使う方法(Using Web Fonts with CSS)と
SVG と JavaScript で使う方法(Using SVG with JavaScript)があります。
またフォントをダウンロードして使う方法とリンクして使う方向がありますが、
リンクして、Web フォントとして使う方法を紹介いたします。
下記のlink タグを使って head 内に読み込みを記述します。

<link href="https://use.fontawesome.com/releases/v5.6.1/css/all.css" rel="stylesheet">

表示するアイコンは基本的にインライン要素(<i> や <span>)で
「Icon Style(スタイル)BrandsとSolid(クラ名(prefix)fabとfas)とアイコン名」をマークアップします。
<span> 要素を使った例は下記の通りです。
クラス名とアイコン名はより検索してください。

<span class="fab fa-apple"></span> 表示イメージはです。

また表示サイズ指定は、下記のクラスを指定する事が出来ます。

<span class="fab fa-apple fa-3x"></span>


サイズ指定
classsizememo 表示
fa-xs.75em
fa-sm.875em
fa-lg1.33emvertical-align: -25%が適用される
fa-2x2em
fa-3x3em
fa-4x4em
fa-5x5em
fa-6x6em
fa-7x7em -
fa-8x8em -
fa-9x9em -
fa-10x10em -

上記以外のサイズにする場合や色の変更、回転・反転、アニメーション効果、等の指定も可能です。
詳細は割愛させて頂きます。

UnicodeEmojiAwesomeサイトマップホーム