Light TALK Plus＋ vol.25「アイコンフォント」
「Light TALK Plus＋」とは…
アルバイトが気になった今ホットなWEBニュースやティップスをお届けするコーナーです。
今回のテーマは「アイコンフォント」です！
アイコンフォントとは？
アイコンフォントはWeb上で文字と一緒に表示することのできるアイコンのことです。
画像と違う部分はどんなに拡大してもボヤけません。
サイズや色も簡単に変えることができるのでWeb制作する上で大変便利なツールです。
Font Awesome5
Font Awesome5は2017年にリリースされたFont Awesomeの最新バージョンになります。
無料プランと有料プランに分かれています。
今回はFont Awesome5の使用方法について説明します。
CDNをhead内に記載する
まずはhead内に下記に示したCDNを記述します。
この時点で既にFont Awesome5が使用可能な状態となっています。
<link href=”https://use.fontawesome.com/releases/v5.6.1/css/all.css” rel=”stylesheet”>
body内に使用したいアイコンフォントのコードを記述する
コード内に下記のコードを記載します。
<i class=”fab fa-twitter”></i>
実際にコードを入力したものが下記のものになるのですがTwitterアイコンが表示されました。
このようにheadとbodyにコードを打ち込むだけで簡単にアイコンフォントを使用することができます。
アイコンフォントをカスタマイズ
アイコンフォントはただアイコンを表示するだけではありません。
使用目的によってサイズや色を変化することもできるのです。
大きさを変える
アイコンフォントはタグのクラスに「fa-2x」「fa-3x」とコードを書き込むことで2倍、3倍に大きさを変えることができます。
下記に実際に打ち込んだコードと表示されるアイコンフォントを表示させます。
※「fa-lg」はフォントアイコンのサイズが1.333倍になっています。
<i class=”fab fa-twitter”></i>
<i class=”fab fa-twitter fa-lg“></i>
<i class=”fab fa-twitter fa-2x“></i>
<i class=”fab fa-twitter fa-3x“></i>
<i class=”fab fa-twitter fa-4x“></i>
<i class=”fab fa-twitter fa-5x“></i>
<i class=”fab fa-twitter fa-6x“></i>
<i class=”fab fa-twitter fa-7x“></i>
<i class=”fab fa-twitter fa-8x“></i>
<i class=”fab fa-twitter fa-9x“></i>
<i class=”fab fa-twitter fa-10x“></i>
色を変える
アイコンフォントはスタイルシートで指定することによって色を変化させることができいます。
下記に実際に打ち込んだコードと表示されるアイコンフォントを表示させます。
今回はタグ内にスタイルシートを指定しています。
<i class=”fab fa-twitter” style=”color: blue;”></i>
<i class=”fab fa-twitter” style=”color: green;”></i>
<i class=”fab fa-twitter” style=”color: red;”></i>
角度を変える、回転させる
スタイルシートで色を指定できるので他にも角度を変えて表示させたり、回転させることも可能です。
以下のコードは角度を変化させて表示させたものになります。
<i class=”fab fa-twitter” style=”transform: rotate( 0deg );”></i>
<i class=”fab fa-twitter” style=”transform: rotate( 60deg );”></i>
<i class=”fab fa-twitter” style=”transform: rotate( 120deg );”></i>
アイコンフォントを回転させるためにはCSSのアニメーションを用います。
<i class=”fab fa-twitter rotate-anime“></i>
<style>
.rotate-anime {
animation: rotate-anime 2s linear infinite;
}
@keyframes rotate-anime {
0% {
transform: rotate(0);
}
100% {
transform: rotate(360deg);
}
}
</style>
ホバー時
PCサイトではホバー時にアイコンフォントにもデザインを変更させることができます。
<p class=”p-hover“><i class=”fab fa-twitter”></i> サンプル</p>
<style>
.p-hover {
width: 100px;
height: 40px;
line-height: 33px;
text-align: center;
color: orange;
font-weight: bold;
border: 3px solid orange;
}
.p-hover:hover {
color: black;
border: 3px solid black;
background-color: orange;
transition: all 1.5s;
cursor: pointer;
}
</style>
サンプル
いかがだったでしょうか？
今回ご紹介した「Font Awesome5」以外にもアイコンフォントを提供しているサイトはありますのでより質の高いサイト作りに役立ててみてはいかがでしょうか？
Light Webからのお知らせ
ライトウェブはプライバシーマークを取得しました！
今までも個人情報を取り扱う案件に携わって参りましたが、
より安心してお任せいただけるようになりました。
今後ともライトウェブをよろしくお願い致します！
