Font Awesomeでアイコンが表示されない。ワードプレスに挿入する方法！

Font Awesomeでアイコンが表示されない

どの記事を見てもちんぷんかんぷん

お分かりですか？上のを埋め込みました。

拡大もできます。

以前は、必死に調べては途中で諦めるを繰り返していましたが、今では、あるサイトのおかげで何の苦労もせずにアイコンを埋め込むことができるようになりました。

そのサイトがこちら→ものぐさノート

ただし、こちらのサイトは製作者の方が自分用に作った簡易的なものだそうで、アイコンの種類がVer.4.7時なので少ないです（それでも十分すぎる量があります）

そして、Font Awesomeを使うのを諦めかけた人には救世主ともいえるありがたきサイトなのです。

Font Awesomeを使いやすく

まずを埋め込みましょう

ものぐさノートでアイコンの検索

1. ものぐさノートにアクセス
2. 検索窓に、家orホームと入力して
3. 出てきたアイコンの青い部分をクリックすると”<i class〜コピーしました”と出てきます
   

ワードプレスのHTML挿入方法

ワードプレスに挿入する際の方法は、カーソルの位置に注意してください。アイコンを埋め込みたい位置で以下の手順をスタートします。

1. ブロックエディターの画面でをタップして【HTML挿入】を選択
2. すると、以下ようなポップアップが表示されます
   
3. ものぐさノートでコピーした内容をペースト（貼付け）します
4. OKで、文中にHTMLの表示がされています。
   
5. プレビューで確認してみましょう
   
6. プレビューでアイコンが表示されたのがわかります。
   

アイコンの拡大の方法

アイコンの拡大も、CSSを使うことなく、ブロックエディターの機能を活用すれば簡単です。

拡大する方法

1. 上記の方法でワードプレス上に表記されたを選択します。
2. ブロックエディターのフォントサイズを選びサイズを変更します。
   
   
   
3. 同じ要領で、太字、色もCSSを使わなくても赤・青・緑と選べますね。
   
   
4. ←大きさ44pxで作成。

Font Awesome〜まとめ

Font Awesome表示されましたか？

CSSを全く触らなくても、表示出来る方法でした。

Font Awesomeには、本当に時間をとられてしまい、でも、アイコンは入れたい。そんな時に【ものぐさノート】さんのサイトに出会い、ブックマークをして活用出来るようになりました。