簡単なFont Awesomeの使い方-76log

Font Awesomeとは？

　

ウェブで表示できるフォントの無料サービスです。
フォントですが、実際には色々なアイコンになっています。
画像と違い、サイズや色も自由に簡単に変えられるので、とっても便利です。

The world’s most popular and easiest to use icon set just got an upgrade. More icons. More styles. More Options.

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

上記、文字列をコピーしてHTMLソースコード<head>〜</head>内に貼り付けます。

使いたいアイコンを探します。
検索は英語で。日本語での検索はできません。
グレーアウトしているものは無料のままでは使えません。

有料版のPROにすると使えるようになるようです。

使いたいアイコンを探して、上部にあるコード<i class=""></i>をコピーします。

ウェブサイトやブログなどアイコンを表示させたいページ(HTML内)にタグを貼り付けます。

フォントと同じようにサイズ、色などはもちろん、様々なカスタム可能です。

<i class="far fa-compass fa-rotate-90">

fa-rotate-90を追記。
90の部分を180、270に変えることで角度の変更が可能です。

<i class="fas fa-spinner fa-spin">

fa-spinと追記すると回転させることができます。

<i class="far fa-hand-point-right faa-horizontal animated">

faa-horizontal animatedを追記。

フォントを指定する場合、無料版は下記のように記述します。

font-family: "Font Awesome 5 Free";

ブランドアイコン(fabで始まるもの)は下記のように記載する必要があります。

font-family: "Font Awesome 5 Brands";

また、font-weightを指定しないと表示されませんでした。
下記表にまとめました。

STYLE		WEIGHT	FONT-FAMILY
Solid	fas	font-weight: 900;	●フリー(無料) font-family: "Font Awesome 5 Free"; ●プロ(有料) font-family: "Font Awesome 5 Pro";
Regular	far	font-weight: 400;
Light	fal	font-weight: 300;
Duotone	fad	font-weight: 900;
Brands	fab	font-weight: 400;	font-family: "Font Awesome 5 Brands";

無料のアイコンが一覧でみられるチートシートが便利です。

Quickly copy and paste the glyph, name, or unicode value of any Font Awesome icon