Contents[非表示]
Font Awesomeとは？
ウェブで表示できるフォントの無料サービスです。
フォントですが、実際には色々なアイコンになっています。
画像と違い、サイズや色も自由に簡単に変えられるので、とっても便利です。
The world’s most popular and easiest to use icon set just got an upgrade. More icons. More styles. More Options.
簡単な使い方
headタグ内に貼付け
- <link href="https://use.fontawesome.com/releases/v5.6.1/css/all.css" rel="stylesheet">
上記、文字列をコピーしてHTMLソースコード<head>〜</head>内に貼り付けます。
アイコンのタグをコピー
使いたいアイコンを探します。
検索は英語で。日本語での検索はできません。
グレーアウトしているものは無料のままでは使えません。
有料版のPROにすると使えるようになるようです。
使いたいアイコンを探して、上部にあるコード<i class=""></i>をコピーします。
ページに貼り付け
ウェブサイトやブログなどアイコンを表示させたいページ(HTML内)にタグを貼り付けます。色々なカスタマイズ
フォントと同じようにサイズ、色などはもちろん、様々なカスタム可能です。傾斜
- 90度に傾斜
- <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を追記。
注意点
CSSで使う場合
フォントを指定する場合、無料版は下記のように記述します。
- 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"; |
Font Awesome Free's Cheatsheet
無料のアイコンが一覧でみられるチートシートが便利です。Quickly copy and paste the glyph, name, or unicode value of any Font Awesome icon
0 件のコメント:
コメントを投稿