ズボラ応援ブログ始めました

1行追加するだけ!簡単かわいいアイコンフォントFontAwesomeを導入する方法

ブログ運営

FontAwesomeは絵文字のようなウェブフォントです。

画像ではなくテキストとして表示されるので、色やサイズをテキストと同じようにcssで設定できます。

FontAwesomeの導入方法

FontAwesomeはダウンロードして使う方法と、サーバー上に公開されているcssを読み込む方法があります。

この記事ではサーバー上のcssを読む方法を紹介します。(簡単なので!)

下記のコードをhead要素内に書くだけです。

<link href=”https://use.fontawesome.com/releases/v5.6.1/css/all.css” rel=”stylesheet”>

WordPressの場合

WordPressの場合はheader.phpに上記のコードを記載するか、function.phpに下記のコードを記載します。

wp_enqueue_style( ‘font-awesome’, ‘https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css’ );

使っているテーマで導入されてるバージョンが古い場合

WordPressのwp_enqueue_style関数は、同じIDで既にcssが読まれている場合は後の処理は無効になる仕様になっています。

なので親テーマで使われているIDを調べ、子テーマで先に使ってしまえば親テーマの処理を無効にできます。(子テーマのfunction.phpは親テーマのfunction.phpより先に実行される)


FontAwesomeの使い方

FontAwesomeの公式ページにアクセスして使いたいアイコンを探します。

htmlで使う場合

使いたいアイコンのページにある<i>~</i>をコピーする。

コピーしたタグを表示したい位置に張り付ける。

cssで使う場合

before要素などでFont Awesomeのアイコンを使う場合は決まった書き方があります。もしFont Awesomeのアイコンが表示されない(四角になってしまう)場合は下記のポイントをチェックしてみてください。

.class-name {
font-family: “Font Awesome 5 Free”;
content: “\f08d”;
font-weight: 900;
}

font-family

font-familyに”Font Awesome 5 Free”を指定します。途中で仕様変更があったので間違えやすいです。

content

contentにはバックスラッシュと、使いたいフォントのUnicodeを記述します。

font-weight

こちらも途中の仕様変更で指定しなければならなくなりました。freeのアイコンにはsolidとbrandsがあり、solidの場合は900を、brandsの場合は400を指定します。

私はここの設定で躓いていました。はてなブログのテーマで指定されていたfont-weightが優先されていたため、Font Awesomeのアイコンが表示されないトラブルが起きました。

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