Font Awesome6を使ってみよう

練習用ファイルをダウンロード

Font Awesomeとは？

ウェブサイトやブログでWebアイコンフォントを表示できるようにしてくれるサービスです。
ここではFont Awesome5 Font Awesome6を使用します。

Webアイコンフォントとは？

ウェブページ上で文字と同じように表示できるアイコンのことです。
画像でアイコンを貼るのと違い、拡大してもぼやけませんし、色もサイズも簡単に変えることができます。

使い方

２つの使い方
方法1. CDNを使う（ここではCDNを使って説明します）
方法2.サーバーにデータをアップロード

方法1. CDNを使う



1.手順

<head> ～ <head>　へ下のコードをペースト

◎新しいフリーのバージョンはアニメーションが増えました

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


2.手順

❶　FontawAesomeのページへアクセス

❷free and open-source iconsをクリック


❸　Search iconsの右側の ▼ をクリックして「5.15.4」を選ぶ or　「6.7.1」を選ぶ


3.使ってみよう

たくさんのアイコンが表示されているので、その中から自由に選らんでください

ここでは「ghost」を選んでクリックします


ダイアログが出てアイコンのアレンジもできます。
アイコンのスタイル、アニメーション、角度、カラー、サイズなど
「Show Styling Tool」をクリックしてアレンジしましょう

 

ここではアイコンのカラーとサイズを変更しました。
変更後のコードが表示されますので、コピーをして自分のページへペーストしてください。

HTML
<i class="fa-solid fa-ghost fa-2xl" style="color: #f10e7c;"></i>

上のコードの実際の表示→


3.サイズを後から変える

<i class="fa-solid fa-ghost fa-2xl" style="color: #f10e7c;"></i>

5倍にしたアイコンを表示
code→　<i class="fa-solid fa-ghost fa-5x" style="color: #f10e7c;"></i>


4.色を変える

【ブラウザ・コード】

 code→　<p><i class="fas fa-truck" style="color: #f91706;"></i></p>

 code→　<p><i class="fas fa-truck" style="color:blue;"></i></p>

 code→　<p><i class="fas fa-truck" style="color: #fecb81;"></p>

5.回転させる

すでにコピペしたコードにアニメーションを加えることもできます。

code→　<i class="fas fa-tasks fa-spin"></i>

6.Font Awesome Animation

『Font Awesome Animation』という専用のスタイルシートを読み込めば、アイコンにより多くの動きをつけることができるようになります。
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome-animation/0.0.10/font-awesome-animation.css" type="text/css" media="all" />

faa-wrench animated
code→　<p><i class="fab fa-twitter my-skyblue faa-wrench animated"></i></p>

faa-horizontal animated

faa-bounce animated

faa-pulse animated

faa-shake animated

faa-passing animated

faa-burst animated