HTML&CSS

Font AwsomeをCDNで読み込んでWebサイトに表示する手順

HTML&CSS

Font AwsomeをCDNで読み込んでWebサイトに表示する手順

Font Awesome」の導入方法から使い方までをまとめています。
ホームページ制作では頻繁に利用しますので、是非ご覧くださいませ。

Font Awsomeにサインインする

以前まではCDNを一般公開されていたのですが、現在ではFont Awsomeにサインインしないと見れなくなっているようです。
無料でサービスを利用できますので、まずはサインインから始めましょう!

次のURLにアクセスしてください。
https://fontawesome.com/

Font Awsome CDN

画面中央にある「Start for Free」をクリックします。

Font Awsome CDN

中央の入力欄にメールアドレスを入力して「Send Kit Code」をクリックします。
入力したアドレス宛にFont Awsomeからメールが届きますので、メール本文にあるリンクをクリックして、パスワード設定などの手続きを済ませてください。

以上でアカウント登録は完了です。

Font Awsome CDN

画面右上にある「Sign In」をクリックします。

Font Awsome CDN

メールアドレスとパスワードを入力して「Sign In」をクリックします。
以上で、サインインまで完了しました。

Font AwsomeのCDNを読み込む

Font Awsome CDN

画面右上のアイコンをクリックします。

Font Awsome CDN

Font Awsome CDN」という項目があるので、こちらをクリックします。

Font Awsome CDN

CDNで読み込むためのコードが掲載されてます。
こちらのコードをコピーして、HTMLの<head>タグ内に貼り付けます。

<head>
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.15.4/css/all.css" integrity="固有のコード" crossorigin="anonymous">
</head>

以上でCDNの読み込みは完了となります。

Font Awsomeのアイコンを表示させよう!

Font Awsome CDN

上部メニューの「Icons」をクリック有料すると、アイコン一覧が表示されます。
グレーアウトで表示されているのは有料版となりますので、使うことができません。
有料版を使いたい場合は、プランをアップグレードしましょう。

Font Awsomeで矢印を表示してみる

Font Awsome CDN

検索窓でアイコン名を検索することができます。
今回は矢印を表示させてみたいと思いますので「arrow」と検索しました。
使用したいアイコンをクリックしてください。

Font Awsome CDN

HTMLで表示

HTMLで表示する場合は、上部にあるHTMLタグをコピペして使用します。

<i class="fas fa-chevron-right"></i>

CSSの擬似要素で表示

CSSの擬似要素で表示する場合は、ユニコードをコピーして使用します。

<p>詳細はこちら</p>
p:after{
	content: "\f054";
	font-family: "Font Awesome 5 Free";
	font-weight: 900;
}

ユニコードの手前にバックスラッシュ「 \ 」を入れてください。
font-familyプロパティに「Font Awesome 5 Free」の値を入れます。
ユニコードの左側に「Solid Style」と記載されている場合は、font-weightを「900」と指定する必要があります。

Font AwsomeでTwitterアイコンを表示してみる

HTMLで表示

HTMLで表示する場合は、上部にあるHTMLタグをコピペして使用します。

<i class="fab fa-twitter"></i>

CSSの擬似要素で表示

CSSの擬似要素で表示する場合は、ユニコードをコピーして使用します。

<p>ツイートする</p>
p:after{
	content: "\f099";
	font-family: "Font Awesome 5 Brands";
}

こちらもユニコードの手前にバックスラッシュ「 \ 」を入れてください。
font-familyプロパティに「Font Awesome 5 Brands」の値を入れます。ユニコードの左側に「Brands Style」と記載されているアイコンは「Brands」といれる必要があります。

以上、Font AwsomeをCDNで読み込んでWebサイトに表示する手順を紹介しました。
よかったら参考にされてみてください。

参考になった記事はこちら

あなたにおすすめの記事