Font Awesomeの基本の使い方、初心者でも使える！簡単Webアイコン入門｜HTML＆CSS入門講座（12）

HTML＆CSS
2021.07.12
この記事は約16分で読めます。

はじめに

　HTML＆CSS入門講座の第十二弾として、Font Awesomeの基本の使い方、初心者でも使える！簡単Webアイコン入門ついて紹介します。

　この記事を読むと次の疑問について知ることができます。

●Font Awesomeとはどのようなもの？
●Font Awesomeの準備はどうするの？
・Font Awesomeのアカウントの取得
●Font Awesomeの使い方はどうするの？
・HTMLのheadタグ内に「Kit Code」の貼り込み
・使うアイコンを探してコピー
　サイズ変更、色の変更
　アイコンと文字の間に幅を作る
　線で囲む
　角度の変更
　反転
　アイコンにアイコンを重ねる
　回転するアニメーションを付ける
●Font AwesomeをCSSに書くにはどうするの？
●もっと色んなアニメーションを付けたい場合はどうするの？
　HTML＆CSS入門講座（11）では、HTMLの中の<aタグ>の使い方について解説してきました。
 
　Font Awesomerの基本の使い方について深堀していきます。

Font Awesomeとは？

　Web文書内の色々な文字と同様に、アイコンの大きさや色などを変更でき、しかも、大きくしても普通の画像と異なり、ぼやけないアイコンセットを提供してくれるサービスのことです。

　無料で利用できるアイコン（約1600種類）、有料にすると7800種類以上のアイコンが利用できます。

　現在のFont Awesomeの最新のバージョンは5.15.3であり、FontAwesome 6 Beta版がリリースされました。

Font Awesomeの準備

　Font AwesomeをWeb文書で利用するためには、次の3つの方法があります。

利用方法説明おすすめ度
Kit Codehead 内で Kit Code という script タグを読み込みます。◎
CDNhead 内でバージョンごとの link タグ（Web フォント）や script タグ（SVG）を使ってアイコンを読み込みます。○
Downloadアイコン関連のファイルをダウンロードして使用します。△

　ここでは、Kit Codeを利用する方法を紹介します。

Font Awesomeのアカウントの取得

　Font Awesomeを利用するための最初の第一歩がFont Awesomeに登録して、アカウントを取得することです。

　そのためには、利用しているメールアドレスを用意してください。

　メールアドレスが用意できたら、Font Awesomeのホームへ移動し、「Start for free」をクリックします。

 「Get Started for Free」画面が表示され、メールアドレス記入欄にメールアドレスを記入して、「Send Kit Code </>」をクリックします。
 
 
　　「Check Your E-mail」とでるので、登録したメーラーをみると、Font Awesomeから次のようなメールが届くので、この中の「Click to Confirm Your Email Address + Set Things Up」をクリックします。
 
 
　「Let's finish setting up」画面がでるので、メールアドレスを2度記入（最初のメールドレスと確認用）し、「Set Password & Continue →」をクリックします。
 
 
　「Let's Get to Know You Better」画面がでて、名前を入力するように要求されますが、ここでは、名前を入力せずに、「No thanks. Let's skip this step for now」をクリックします。
 
 
　すると、次のようなあなたのKit Name、Kit Code（ぼかしている）が表示され、HTML文書のheadタグ内にKit Codeを書き込めば利用することができるようになります。
 
　テーマCocoonでの設定は、とても簡単で「Cocoon設定」⇒「全体」で「サイトアイコンフォント」で「Font Awesome 5」にチェックを入れ、「変更をまとめて保存」をクリックすれば、記事内で利用ができるようになります。

Font Awesomeの使い方

HTMLのheadタグ内に「Kit Code」の貼り込み

　Font Awesomeを使うためには、HTMLのheadタグ内に「Kit Code」をお貼り込むのでしたね。

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>HTML＆CSS入門講座（12）</title>
<link rel="stylesheet" href="testcss07.css">
<!-- 以下のコードがKid Codeです -->
<script src="https://kit.fontawesome.com/○○○.js" crossorigin="anonymous"></script>
</head>

ここで、○○○には、あなた取得した「Kit Name」を入れて下さいね。

使うアイコンを探してコピー

　Font Awesomeのホームに移動し、上部メニューの「Icons」⇒左にあるメニューの「Free」をクリックすると、無料で利用できるアイコン（1609個）のみが表示されます。

　この中から、使うアイコン（ambulance：救急車）を選びクリックし、表示されるアイコン画面の上部にあるコード<i class="○○○></i>（○○○はアイコンにより異なる）の部分をコピーします。

　コピーしたコードをHTML文書内の使いたい部分に貼り込めばOKです。

　以後の解説では、ambulance、biking、bomb、cog、cloud-sunを使っていろいろ紹介していきます。

サイズ変更、色の変更

　アイコンのサイズを変更するには、コード内のアイコン名に半角スペースを入れて、その後に倍率指定をします。

fa-lg　：　1.33倍
fa-○ｘ　：　○倍

○：1～10までの整数
HTML

  <i class="fas fa-ambulance"></i>
  <i class="fas fa-biking fa-lg"></i>
  <i class="fas fa-bomb fa-3x"></i>
  <i class="fas fa-cog fa-7x"></i>
  <i class="fas fa-cloud-sun fa-10x"></i>
結果は次の通り。
 
 

　次は上述のアイコンに色を付けて見ましょう。

　アイコンに色を付けるには、HTMLの「Style属性」を使う方法もありますが、ここでは、CSSに Class名で色を指定します。

CSS

.fa-ambulance {
color:aqua;
}
.fa-biking {
color:green;
}
.fa-bomb {
color:blue
}
.fa-cog {
color:coral
}
.fa-cog {
color:coral
}
.fa-cloud-sun {
color: red
}

結果は次の通り。

アイコンと文字の間に幅を作る

　アイコン名の後に半角スペースを入れ「fa-fw」を入れることによりアイコンと文字間のスペースを適当に合わせてくれます。

HTML

!-- fa-fwの指定なし -->
<div><i class="fas fa-ambulance fa-lg"></i>救急車</div>
<div><i class="fas fa-biking fa-lg"></i>自転車</div>
<div><i class="fas fa-bomb fa-lg"></i>爆弾</div>
<div><i class="fas fa-cog fa-lg"></i>歯車</div>
<div><i class="fas fa-cloud-sun fa-lg"></i>曇りのち晴れ</div>
<br>
<br>
<!-- fa-fwの指定あり -->
<div><i class="fas fa-ambulance fa-lg fa-fw"></i>救急車</div>
<div><i class="fas fa-biking fa-lg fa-fw"></i>自転車</div>
<div><i class="fas fa-bomb fa-lg fa-fw"></i>爆弾</div>
<div><i class="fas fa-cog fa-lg fa-fw"></i>歯車</div>
<div><i class="fas fa-cloud-sun fa-lg fa-fw"></i>曇りのち晴れ</div>
結果は次の通り。

線で囲む、角度の変更、反転

　アイコンを線で囲むには、アイコン名の後に半角スペースを入れ、その後に「fa-border」を入れます。

HTML

<i class="fas fa-ambulance fa-border"></i>
<i class="fas fa-biking fa-lg fa-border"></i>
<i class="fas fa-bomb fa-3x fa-border"></i>
<i class="fas fa-cog fa-7x fa-border"></i>
<i class="fas fa-cloud-sun fa-10x fa-border"></i>
結果は次の通り。
 
　アイコンに角度や反転をさせるには、次のようにします。
 
角度指定　：　fa-rotate-○○　　　○○には、90、180、270が入ります。
反転（逆向き）　：　fa-flip-horizontal
反転（地面対して）　：　fa-flip-vertical
HTML

<!--90度回転 -->
<i class="fas fa-ambulance fa-rotate-90"></i>
<!--180度回転 -->
<i class="fas fa-biking fa-lg fa-rotate-180"></i>
<!--270度回転 -->
<i class="fas fa-bomb fa-3x fa-rotate-270"></i>
<!--反転（逆向き） -->
<i class="fas fa-ambulance fa-7x fa-flip-horizontal"></i>
<!--反転（地面対して反転） -->
<i class="fas fa-cloud-sun fa-10x fa-flip-vertical"></i></i>
結果は次の通り。
 

アイコンにアイコンを重ねる

　アイコンを重ねるには、スパンタグ（<span>）を使います。

　スパンタグに「fa-stack」のClass名を付け、その中に２つのアイコンを描くようにします。

　１つ目は、「fa-stack-2x」で描き、２つ目が「fa-stack-1x」で描きます。

＜span class="fa-stack">
<i class="アイコンクラス名 fa-stack-2x"></i> 
<i class="アイコンクラス名 fa-stack-1x"></i> 
</span>
HTML

<span class="fa-stack">
<!-- 一つ目に四角のアイコンを青で描きます -->
<i style="color:blue" class="fas fa-square fa-stack-2x"></i>
<!-- 二つ目に救急車のアイコンを白色で描きます -->
<i style="color:white" class="fas fa-ambulance fa-stack-1x"></i>
</span>
結果は次の通り。

回転するアニメーションを付ける

　回転するアニメーションを付けるにはアイコンクラス名の後に半角スペースを入れ、「fa-spin」や「fa-pulse」を入れるだけです。

HTML

<i class="fas fa-ambulance fa-spin"></i>
<i class="fas fa-biking fa-lg fa-spin"></i>
<i class="fas fa-bomb fa-3x fa-spin"></i>
<i class="fas fa-cog fa-7x fa-spin"></i>
<i class="fas fa-spinner fa-7x fa-spin"></i>
<br>
<br>
<i class="fas fa-ambulance fa-pulse"></i>
<i class="fas fa-biking fa-lg fa-pulse"></i>
<i class="fas fa-bomb fa-3x fa-pulse"></i>
<i class="fas fa-cog fa-7x fa-pulse"></i>
<i class="fas fa-spinner fa-7x fa-pulse"></i>
結果は次の通り。

 

Font AwesomeをCSSに書く

　CSSの疑似要素である「before」と「after」を使って、Font Awesomeのアイコンを表示させることができます。

[HTML]
<span class="クラス名"></span>

[CSS]
クラス名:before(or :after) {
font-family: "Font Awesome 5 Free";
content: '\ユニコード';
font-weight: 数値;
}

ここで、数値には、SOLID(fas) font-weight：900、REGULAR(far) font-weight：400、LIGHT(fal) font-weight：300、BRANDS(fab) font-weight：400を入力

HTML

    <div class="moji2bai">
      <span class="test01"> 救急車</span>
      <span class="test02"> 自転車</span>
      <p></p>
      <span class="test03"> 爆弾</span>
      <span class="test04" > 歯車</span>
      <span class="test05"> 曇りのち晴れ</span>
     </div>
CSS

.moji2bai {
font-size: 2em;
}
.test01:before {
font-family: "Font Awesome 5 Free";
content: '\f0f9';
font-weight: 900;
color:magenta;
font-size: 2em;
}
.test02:before {
font-family: "Font Awesome 5 Free";
content: '\f84a';
font-weight: 900;
color:skyblue;
font-size: 2em;
}
.test03:before {
font-family: "Font Awesome 5 Free";
content: '\f1e2';
font-weight: 900;
color:springgreen;
font-size: 2em;
}
.test04:before {
font-family: "Font Awesome 5 Free";
content: '\f013';
font-weight: 900;
color:black;
font-size: 2em;
}
.test05:before {
font-family: "Font Awesome 5 Free";
content: '\f6c4';
font-weight: 900;
color:red;
font-size: 2em;
}
結果は次の通り。
 

もっと色んなアニメーションを付けたい場合

Font Awesome Animation を利用することにより、回転以外のアニメーションが行えます。

利用するためには、HTMLのheadタグ内に、次の文を挿入してください。

<!--Font Awesomeのアニメーション -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome-animation/0.3.0/font-awesome-animation.min.css">
　アニメーションの中のいくつかを紹介します。
 

 <!-- 青の救急車を3倍の大きさで faa-wrench animated -->
<i style="color:blue" class="fas fa-ambulance faa-wrench fa-3x animated"></i>
<!-- 薄緑の歯車を3倍の大きさで faa-bounce animated -->
<i style="color:chartreuse" class="fas fa-cog faa-bounce fa-3x animated"></i>
<!-- マジェンダ色の曇りのち晴れを3倍の大きさで faa-tada animated -->
<i style="color:magenta" class="fas fa-cloud-sun faa-tada fa-3x animated"></i>
<!-- 青色の自転車を3倍の大きさで faa-passing animated -->
<i style="color:black" class="fas fa-biking faa-passing fa-3x animated"></i>
<!-- 赤色の爆弾を3倍の大きさで faa-burst animated -->
<i style="color:red" class="fas fa-bomb faa-burst fa-3x animated"></

　結果は次の通り。

　さらに多くのアニメーションを知りたいのであれば、次のサイトを参照ください。

font-awesome-animation
Simple animations using FontAwesome and some CSS3.
l-lin.github.io

おわりに

　如何だったでしょうか？

　Font Awesomeとはどのようなもの？、Font Awesomeの準備はどうするの？、Font Awesomeのアカウントの取得、Font Awesomeの使い方はどうするの？、HTMLのheadタグ内に「Kit Code」の貼り込み、使うアイコンを探してコピー、サイズ変更、色の変更、アイコンと文字の間に幅を作る、線で囲む、角度の変更、反転、アイコンにアイコンを重ねる、回転するアニメーションを付ける、Font AwesomeをCSSに書くにはどうするの？、もっと色んなアニメーションを付けたい場合はどうするの？などについて解説してきました。

　この記事があなたにとって少しでもお役に立てればこれほど嬉しいことはありません。

以上です。

コメント

タイトルとURLをコピーしました