このサイトを作り始めてた時からFont Awesome 5を使いたいなーとか思っていたら、その声が届いたのか、秋のバージョンアップで対応と相成りました♪わいひらさん、グッジョブ!
長くなって2ページになってしまいました😓
![](http://soyo.life/wp-content/uploads/soyo3-150x150.webp)
2019年、FA5。今は2022年で、FA6。どんどん新しくなるけれど、古いのも使えるし、まだまだ現役!ブログで適材適所に使ってあげましょう。
Font Awesome 5 とは
Font Awesome は、HTMLタグを入力するだけで様々なインフォグラフィックをWebページに表示できる素晴らしいサービスです。
Font Awesomeを利用するメリット
普段使いでは、メリットだらけな気がしますが。
- 無料で利用できる(Proは有料。年間99$)
- 画像ではなく文字扱いなので読み込み時間がかからない
- 画像と文字を並べたときのギャップ(ずれ)が発生しない
- 大きさ、色、背景色、傾き、回転などの表現が簡単♪
Pro版は選択できるフォント数や変更ポイントが多いですが、無料版でも色々と工夫して表現することができます。
私は文字にマーカーを付けたりするのはあまり好きではなく。
でも、アイコンは使えるなら使いたいなー(気がついたらね)と思ってます。
あえてデメリットを上げるなら、
HTMLを直接編集しないといけない
ということでしょうか。こればかりは仕方がないので、HTML&CSSはWordPressしながらでも少しずつ勉強しておきましょうね。
Cocoonでの設定方法
Cocoonではめちゃくちゃ簡単に設定できます。
ダッシュボードへ移動して、Cocoon設定をクリックして、
全体タブの中にある、サイトアイコンフォント項目のFontAwewome5を選択して保存します。
![Cocoonの設定画面](http://soyo.life/wp-content/uploads/20191123-fontawesome-01-1024x634.gif)
![Cocoonの設定画面](http://soyo.life/wp-content/uploads/20191123-fontawesome-01-1024x634.gif)
これだけです☺(マーカー使っちゃった😂)
使用方法
HTMLを取得する
Font Awesomeサイトにある無料Fontから利用したいアイコンのHTMLを取得します。
1.ギャラリーへ移動
![Font Awesome アイコンページ](http://soyo.life/wp-content/uploads/20191123-fontawesome-02-1024x634.gif)
![Font Awesome アイコンページ](http://soyo.life/wp-content/uploads/20191123-fontawesome-02-1024x634.gif)
2.利用したいフォントを探す。
![キーワードを入れて検索します](http://soyo.life/wp-content/uploads/20191123-fontawesome-03-1024x634.gif)
![キーワードを入れて検索します](http://soyo.life/wp-content/uploads/20191123-fontawesome-03-1024x634.gif)
3.フォントをクリック
![アイコンのHTMLを取得します](http://soyo.life/wp-content/uploads/20191123-fontawesome-04-1024x634.gif)
![アイコンのHTMLを取得します](http://soyo.life/wp-content/uploads/20191123-fontawesome-04-1024x634.gif)
4.表示されるHTMLをコピーする
![HTMLタグをコピーします](http://soyo.life/wp-content/uploads/20191123-fontawesome-05-1024x634.gif)
![HTMLタグをコピーします](http://soyo.life/wp-content/uploads/20191123-fontawesome-05-1024x634.gif)
ここまででHTMLの取得完了です。
つぎに、これをWordPressへ貼り付けます。
WordPressの編集ページへ貼り付ける
Gutenbergのブロックを利用している場合は、カスタムHTMLブロックを使います。
1.カスタムHTMLブロックを挿入する
![WordPressの編集画面へHTMLをはりつける](http://soyo.life/wp-content/uploads/20191123-fontawesome-06-1024x634.gif)
![WordPressの編集画面へHTMLをはりつける](http://soyo.life/wp-content/uploads/20191123-fontawesome-06-1024x634.gif)
カスタムHTMLボックスのショートカットは、/h です。
![](https://soyo.life/wp-content/uploads/gurenberg-slash-cover-300x186.gif)
![](https://soyo.life/wp-content/uploads/gurenberg-slash-cover-300x186.gif)
2.ボックス内にHTMLを貼り付けます。
![HTMLをはりつけます](http://soyo.life/wp-content/uploads/20191123-fontawesome-07-1024x634.gif)
![HTMLをはりつけます](http://soyo.life/wp-content/uploads/20191123-fontawesome-07-1024x634.gif)
3.プレビューボタンを押すとアイコンが表示されれば成功です♪
![アイコンが表示されると成功です](http://soyo.life/wp-content/uploads/20191123-fontawesome-08-1024x634.gif)
![アイコンが表示されると成功です](http://soyo.life/wp-content/uploads/20191123-fontawesome-08-1024x634.gif)
HTMLとの混合が面倒くさい場合の便利な入力方法
普段、ブロックで楽して書いているとHTMLで書くのって結構面倒くさい人!😂
そよパパはHTMLで書くのは全く問題ないけど、ブロックが楽すぎて廃人になりかけてる。
なので、そよパパ的な楽な方法を。
- まずはブロックで文章を書く
- 入れたいアイコンの場所にマーク(例:*****)を入れる
- ブロックを「HTMLとして編集」し、マークの部分をHTMLへ置き換える
多分、文章の中にアイコンを使いたいなら、この方法が楽でいいかな。(それでも見つけにくいけど)
ただ、修正するときはHTMLと向き合わないといけないけれどね。
次にアイコンの探し方をご説明します。
コメント