稼いでいるブログを公開します >>

Font Awesomeが表示されない|四角に文字化けする原因と対処法

Font Awesomeを利用すれば、WordPress上でも簡単にアイコンを表示することができます。

一度使い方を覚えてしまったらブログのカスタマイズにも幅が出るのですが、導入初期にはうまくアイコンが表示されず困ってしまう人も少なくありません。

そこでこのページでは、Font Awesomeが四角に文字化けして表示されない原因と対処法をご紹介していきます。

今だけ限定!!

Font Awesomeが四角に文字化けする問題

Font Awesomeの導入方法が誤っていると、正しくアイコンが表示されずに「 」という表示になってしまいます。

試しに、Font Awesomeの設定をわざとミスして表を作ってみました。

6つのFont Awesomeを設置しましたが、ご覧のとおりうまくアイコン画像が表示されていません。

Font Awesomeが表示されない原因と対処法

アフィ
アフィ

Font Awesomeが表示されない原因は色々と考えられますが、上から設定ミスの可能性が高い順に並べて対処法を紹介していきます。

CDNコードのheadへの貼り付けミス

Font Awesomeを呼び出すために、head内にコードを貼り付けられたかと思います。(Cocoonテーマの方はこの作業は不要)

そのコードの名前をCDNコードと呼ぶのですが、そのコードを正しく貼り付けられていない可能性があります。

初心者の方の中には、そもそもこのCDNコードをheadに貼り付けていない人もいるぐらいですので、きちんと貼り付けたと思っている人も念の為もう一度確認しておくと良いでしょう。

また、CDNコードは都度アップデートされています。

あなたが貼り付けたCDNコードが古くなっている可能性もあるので、Font Awesome公式サイトより新しいコードを取得してコピー・アンド・ペーストしましょう。

アフィ
アフィ

CDNコードの貼り付け手順もご紹介しておきます。

ダッシュボード外観の中にあるテーマエディターをクリックします。

テーマエディター

 

テーマに子テーマを入れている方は、編集するテーマを選択:を親テーマにして選択をクリックします。

 

テーマヘッダー(header.php)をクリックし、</head>の手前にCDNコードをペーストします。(</head>の位置はテーマによって異なります)

 

ファイルを更新をクリックして変更を保存します。

 

テーマを編集することになりますので、事前にバックアップをとっておくと安心でしょう。

BackWPupの設定方法と使い方|WordPressの自動バックアッププラグインでもしもに備えよう!
WordPressのカスタマイズをする・しないに関わらず、ブログ運営者として是非ともやっておきたいのがWordPressのバックアップです。 いざというときにバックアップデータがなければ、それまでに書いた記事も全て無くなってしまう・・...

PRO版のアイコンを使用している

Font Awesomeには無料で使用できるfree版のアイコンと、有料のPRO版アイコンがあります。

無料で使えるのはfree版のアイコンのみとなっていますので、PRO版のアイコンを使おうとしていないか今一度確認してみるといいでしょう。

以下のサイトを利用すればfree版のアイコンのみを日本語で検索することができますので、非常に便利です。

Font Awesomeのアイコンを日本語でサクっと検索。Web制作の作業効率UP!
Font Awesomeのアイコンを日本語でサクっと検索できるようにしました。PhotoshopやイラレでもFont Awesomeのアイコンを使っている方は、表示されたアイコンをコピペして使えます。

CSS疑似要素のfont-family:指定を誤っている

Font AwesomeをCSSの疑似要素で指定している場合、コードの一部が誤っている可能性があります。

その中でも特に抜けてしまいがちな部分がfont-family:指定です。

通常、正しくFont Awesomeを表示させるためには、以下のようにfont-family:を指定しなければいけません。

font-family: "Font Awesome 5 Free";

この中で注意したいのが最後に「Free」を付ける点です。

以前は「Free」と入力しなくても表示ができていたのですが、途中からFont Awesomeの仕様が変わったことにより、こちらの指定も必要となりました。

以前は問題なく表示されていたのに何故か表示されなくなったという人は、これが原因の可能性が高いです。

CSS疑似要素のfont-weight:指定を誤っている

Font AwesomeをCSSの疑似要素で指定している場合、font-weight:の指定も間違いやすい部分です。

無料のfree版で使えるのは400か900のみですので、font-weight:の指定をもう一度確認してみましょう。

表示されるfont-weight:指定は、以下の2パータンのどちらかのみです。

font-weight:400;
font-weight:900;

400なのか900なのかは使用するFont Awesomeのアイコンによって異なります。

Font Awesomeのアイコン一覧ページにアクセスし、自分が設置したいアイコンのStyleを確認してみましょう。

 

Styleの前に書かれている文字によってfont-weight:で指定する数値が異なります。

Style タイプ font-weight:
Solid Free 900
Brands Free 400
Regular Pro 400
Light Pro 300

CSS疑似要素のcontent:指定を誤っている

WordPressの使用上、バックスラッシュが自動で「\」に変換されてしまいます。「\」と書かれている箇所は全てバックスラッシュのことを指していますので、お間違いのないよう注意してください。

Font AwesomeをCSSの疑似要素で指定している場合、content:には必ず「\(バックスラッシュ)」が必要です。

Font Awesomeのアイコン一覧ページからユニコードをコピー・アンド・ペーストしている人はこの「\(バックスラッシュ)」を手動で付け足す必要がありますので、ここも忘れがちな部分です。

 

記述としては、以下のようになります。

content: "\f179";

実際に稼いでいるブログを見てみませんか?

現在、アフィが実際に収益を上げているブログメルマガ読者さんに無料で公開しています。

公開するブログは○○ジャンルの特化型ブログとなっており、記事数は30記事ほど、月間PV数はたったの50PVほどしかありません。

ですが、その特化型ブログからは毎月数万円の収益が発生しています。

アフィ
アフィ

どんなブログなのか興味がある人は、今すぐメルマガに登録してチェックしてみてください。

アフィ公式メルマガ

 

届かないというお問い合わせが増えています
『@maekawa-seo.com』のメールアドレスからメルマガを配信します。メールが届かない方は迷惑メールフォルダを確認するか、受信設定を見直してください。
アフィ

携帯ショップ店員など社会人として6年間勤務。
人に使われ続けることに疑問をもち、社会人6年目に輸入会社を設立し独立。
2017年からブログもスタートし、特化型ブログを運営。
時間にとらわれない働き方にシフトして妻との自由な時間を満喫中♪
自分の力で稼ぎ、人に雇われない働き方をしたい方はぜひ当ブログの情報を参考にしてみてください。

【仕事内容】

輸入会社経営
コンテンツ販売
ホームページ制作
ブログ収益化コンサルタント

【実績】

◯特化型ブログ◯
特化型ブログで累計収益1,000万達成

◯輸入販売◯
独立初年度から6,000万の売上達成

◯コンサル生実績(複数名)◯
月収10万円~44万円

メルマガ登録はこちら >>

詳しいプロフィールはこちら >>

アフィをフォローする
WordPressの使い方
アフィブログ

コメント