webアイコンフォントとは？Font Awesomeを使おう
インスタやTwitterなどのSNSアイコンや、チェックリストのアイコンなど、様々なアイコンを表示できるFont Awesome」について今回はご紹介します。
Font Awesomeとは？
自身のwebサイトやブログでwebアイコンフォントを表示できるサービスです。
商標利用が可能で、img要素で画像を読み込まなくても簡単にアイコンを表示させられます。
また表示だけではなく、サイズや色、アニメーションをつけたりカスタマイズすることも可能です。
無料版でも1500個以上の種類が用意されていて、ブログやweb制作の様々なところで活用できるのでぜひ試してみてください。
Font Awesomeの読み込み方法
使用するためには、Font Awesomeを読み込む必要があります。
方法が3つあるので詳しく説明していきます。
■CDNを使う
■サーバーにファイルを配置して読み込む
■Kitを使う
方法1.CDNを使う
下記のコードをコピーしてhead内に記載します。
<link href=”https://use.fontawesome.com/releases/v6.0.0/css/all.css” rel=”stylesheet”>
これだけでFont Awesomeを使えるようになるので、手軽で簡単な方法です。
また自分のサーバにアップロードしなくても使うことができるので、サーバーの負荷を減らすこともできます。
方法2.サーバーにファイルを配置して読み込む
Font Awesomのサイト上でアカウント作成を行いファイルをダウンロードして、自身のサーバーにアップロードする方法です。
アップロード後は方法1と同じようにhead内に配置すればOKです。
方法3.Kitを使う
最新版では、「Kit」というものでFont Awesomeの読み込みができるようになりました。
Font Awesomのサイト上でアカウント作成を行い、Kitを選択すると埋め込み用のコードが表示されます。
コードをコピーしてhead内に記載します。
<script src=”https://kit.fontawesome.com/固有のコード.js” crossorigin=”anonymous”></script>
Font Awesomeの使い方
Font Awesomeサイトから表示したいアイコンを選びます。
選んだら、コピーして表示したいところに貼り付けます。
ソース<i class=”fa-solid fa-ice-cream”></i>
実際に表示した例
デザイン変更
サイズを変更する
「fa-サイズ」クラスを指定することでアイコンのサイズを変更できます。
fa-2xs(0.625em)
fa-xs(0.75em)
fa-sm(0.875em)
fa-lg (1.25em)
fa-xl(1.5em)
fa-2x (2倍)
fa-3x (3倍)
:
fa-10x (10倍)
ソース
<i class=”fa-solid fa-ice-cream fa-1x”></i>
<i class=”fa-solid fa-ice-cream fa-2x”></i>
<i class=”fa-solid fa-ice-cream fa-3x”></i>
<i class=”fa-solid fa-ice-cream fa-4x”></i>
<i class=”fa-solid fa-ice-cream fa-5x”></i>
<i class=”fa-solid fa-ice-cream fa-6x”></i>
<i class=”fa-solid fa-ice-cream fa-7x”></i>
<i class=”fa-solid fa-ice-cream fa-8x”></i>
<i class=”fa-solid fa-ice-cream fa-9x”></i>
<i class=”fa-solid fa-ice-cream fa-10x”></i>
実際に表示してみるとこのように表示されます。
色を変更する
色の変更をしたい場合は、style属性で指定をします。
ソース
<i class=”fa-solid fa-ice-cream” style=”color:pink;”></i>
<i class=”fa-solid fa-ice-cream” style=”color:skyblue;”></i>
<i class=”fa-solid fa-ice-cream” style=”color:yellow;”></i>
実際に表示してみるとこのように表示されます。
今回はstyle属性で指定していますが、CSSで設定することもできます。
アニメーション
サイズ変更と同じようにクラスに設定を追加するだけで、アニメーションも簡単に実装できます。
fa-beat
fa-fade
fa-beat-fade
fa-bounce
fa-flip
fa-shake
fa-spin
重ねて表示
「fa-stack」クラスで囲むことで、Font Awesome同士を重ねて表示することもできます。
<span class=”fa-stack”>
<i class=”アイコンクラス名 fa-stack-2x”></i>
<i class=”アイコンクラス名 fa-stack-1x”></i>
</span>
その他にも、向きや角度、アイコンを囲ったり簡単にカスタマイズすることができます。
詳しく知りたい方は、公式サイトを確認してみてください。
https://fontawesome.com/docs/web/style/styling
また今回は簡単な表示設定しか説明しませんでしたが、CSSの疑似要素で使うこともできます。
また機会があれば紹介したいと思います。ぜひFont Awesomeを活用してみてください。
(0) comments
Comments are closed.