BloggerにFont Awesomeでアイコンを追加する

Font Awesome

Font Awesomeでアイコンを使用するための手順

Bloggerの引用スタイルがショボかったので、何とかカスタマイズを使用した際に、Font Awesomeのアイコンを使用する必要があったので、使用可能にするまでの手順をまとめます。

引用スタイルの変更の記事はこちら

　Bloggerで引用スタイルを変更する

１．以下サイトにアクセス

Font Awesome　のサイトのアクセスします。
　https://origin.fontawesome.com/

２．「Start Using Free」をクリック

以下の画面キャプチャのとおり、「Start Using Free」を選択します。

無料ユーザーとして利用します。

３．コードをコピー

「Start a New Project」というページが表示されるので、表示されているコードをコピーします。

コードをクリップボードにコピー

４．</head>の直前に貼り付け。その際、終端記号/を追加

自身のWebページのHTMLコードを表示し、</head>の直前に貼り付ます。

その際、貼り付けたコードに終端記号"/"を追加しました。

…rel='stylesheet'/>

これで、設定は完了です。

実際にアイコンを表示してみる

設定が完了したので、ためしにアイコンを表示させます。

手順は以下の通りです。

１．使用するアイコンをFont Awesomeのページから選ぶ

Font Awesomeのトップページに検索ボックスがあるので、キーワードを入力して検索を行います。

左上に検索ボックス

２．選んだアイコンのコードを取得する。

選んだアイコンのページを開くと、以下の画面キャプチャのところにコードが表示されているので、コピーします。

赤枠したところにあるコードをコピーします。

３．アイコンを表示するページのHTMLに取得したコードを貼り付ける。

以下のようにHTMLコードの編集画面で、コピーしたコードを貼り付けます。

コピーしたコードを貼り付けると以下のように表示されます。

大きさや色を変更すると以下のように表示されます。

さいごに

いかがでしたか。
アイコンが表示できるとかなり見栄えが良くなりますね！