はじめに
HTML&CSS入門講座の第十二弾として、Font Awesomeの基本の使い方、初心者でも使える!簡単Webアイコン入門ついて紹介します。
この記事を読むと次の疑問について知ることができます。
●Font Awesomeの準備はどうするの?
・Font Awesomeのアカウントの取得
●Font Awesomeの使い方はどうするの?
・HTMLのheadタグ内に「Kit Code」の貼り込み
・使うアイコンを探してコピー
サイズ変更、色の変更
アイコンと文字の間に幅を作る
線で囲む
角度の変更
反転
アイコンにアイコンを重ねる
回転するアニメーションを付ける
●Font AwesomeをCSSに書くにはどうするの?
●もっと色んなアニメーションを付けたい場合はどうするの?
Font Awesomeとは?
Web文書内の色々な文字と同様に、アイコンの大きさや色などを変更でき、しかも、大きくしても普通の画像と異なり、ぼやけないアイコンセットを提供してくれるサービスのことです。
無料で利用できるアイコン(約1600種類)、有料にすると7800種類以上のアイコンが利用できます。
現在のFont Awesomeの最新のバージョンは5.15.3であり、FontAwesome 6 Beta版がリリースされました。
Font Awesomeの準備
Font AwesomeをWeb文書で利用するためには、次の3つの方法があります。
利用方法 | 説明 | おすすめ度 |
Kit Code | head 内で Kit Code という script タグを読み込みます。 | ◎ |
CDN | head 内でバージョンごとの link タグ(Web フォント)や script タグ(SVG)を使ってアイコンを読み込みます。 | ○ |
Download | アイコン関連のファイルをダウンロードして使用します。 | △ |
ここでは、Kit Codeを利用する方法を紹介します。
Font Awesomeのアカウントの取得
Font Awesomeを利用するための最初の第一歩がFont Awesomeに登録して、アカウントを取得することです。
そのためには、利用しているメールアドレスを用意してください。
メールアドレスが用意できたら、Font Awesomeのホームへ移動し、「Start for free」をクリックします。
Font Awesomeの使い方
HTMLのheadタグ内に「Kit Code」の貼り込み
Font Awesomeを使うためには、HTMLのheadタグ内に「Kit Code」をお貼り込むのでしたね。
使うアイコンを探してコピー
Font Awesomeのホームに移動し、上部メニューの「Icons」⇒左にあるメニューの「Free」をクリックすると、無料で利用できるアイコン(1609個)のみが表示されます。
この中から、使うアイコン(ambulance:救急車)を選びクリックし、表示されるアイコン画面の上部にあるコード<i class="○○○></i>(○○○はアイコンにより異なる)の部分をコピーします。
コピーしたコードをHTML文書内の使いたい部分に貼り込めばOKです。
以後の解説では、ambulance、biking、bomb、cog、cloud-sunを使っていろいろ紹介していきます。
サイズ変更、色の変更
アイコンのサイズを変更するには、コード内のアイコン名に半角スペースを入れて、その後に倍率指定をします。
次は上述のアイコンに色を付けて見ましょう。
アイコンに色を付けるには、HTMLの「Style属性」を使う方法もありますが、ここでは、CSSに Class名で色を指定します。
.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」を入れることによりアイコンと文字間のスペースを適当に合わせてくれます。
!-- 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」を入れます。
<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>
<!--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名を付け、その中に2つのアイコンを描くようにします。
1つ目は、「fa-stack-2x」で描き、2つ目が「fa-stack-1x」で描きます。
<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」を入れるだけです。
<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のアイコンを表示させることができます。
.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タグ内に、次の文を挿入してください。
<!-- 青の救急車を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とはどのようなもの?、Font Awesomeの準備はどうするの?、Font Awesomeのアカウントの取得、Font Awesomeの使い方はどうするの?、HTMLのheadタグ内に「Kit Code」の貼り込み、使うアイコンを探してコピー、サイズ変更、色の変更、アイコンと文字の間に幅を作る、線で囲む、角度の変更、反転、アイコンにアイコンを重ねる、回転するアニメーションを付ける、Font AwesomeをCSSに書くにはどうするの?、もっと色んなアニメーションを付けたい場合はどうするの?などについて解説してきました。
この記事があなたにとって少しでもお役に立てればこれほど嬉しいことはありません。
以上です。
コメント