こんにちは、おじさんです。
今回ははてなブログにFontAwasomeを導入する方法について解説していきます。
FontAwasomeとは
まず「FontAwasome」について知らない方向けへの説明です。
FontAwasomeってのは簡単に説明すると
「」これみたいなやつです。
？？？って方もいると思うので詳しく説明すると、
こういう絵文字みたいないわゆる「アイコンフォント」を文字として使うことができるサービスです。
使い方
続いてはこのFontAwasomeの使い方です。
導入方法
まずは導入方法です。
はてなブログのダッシュボードにログインしたら左の「設定」をクリックしてください。
次に、詳細設定をクリックしたら下の方にスクロールしていって「＜head＞要素にメタデータを追加」ってところを探してください。
見つけたらここにコードを入力していきます。
入力するコードは
<link href="https://use.fontawesome.com/releases/v6.0.0/css/all.css" rel="stylesheet">
です。
とりあえず「v6.0.0」ってところはこれでOKです。
使い方
続いては使い方です。
まず公式サイトで使いたいアイコンを探します。
左上の検索のところをクリックします。
そしたらこんな画面が出てくるので検索ボックスに探したいアイコンを検索します。
例えばチェックマークのアイコンが使いたかったら「check」って入れて検索します。
検索して使いたいアイコンをクリックしたらこんな画面が出てくるので
赤く囲ってるところをクリックしてください。
続いてははてなブログに移動します。
はてなブログで記事編集画面に行ったらさっきのコードを貼り付けます。
しかあし、ここで注意点があって、
さっきコピーしたコードの中に「 」という文字を入れてください！
そうしないと勝手に改行が入ってしまいます...
なので最終的にコードは...
<!-- チェックマークの場合 --> <i class="fa-solid fa-check"> </i>
こうなります!
