かとう家の小ばなし

移住、しごと、森のようちえん、田舎暮らし、アウトドア

無料ホームページ作成ツール、Jimdoでfontawsome(Webアイコンフォント)を使う方法

f:id:chibo1217:20180916172538p:plain

先日、無料のホームぺー作成ツールjimdoを使う機会がありました。

もう少しわかりやすいサイトにしたいなあと、アイコンフォントであるfontawsomeを使用したので、導入方法をご紹介します。

 

fontawsomeの導入方法

①jimdoの画面で、左上のメニューバー⇒基本設定⇒ヘッダー編集へ移動します。

②ヘッダー編集の画面で、コードを挿入します。ソースはこちらからコピー⇒Getting Started | Font Awesome

fontawsomeのページで、矢印のボタンを押すとコードがコピーできます。

f:id:chibo1217:20180916215700p:plain

 

そして、jimdoのページで貼りつけ。

f:id:chibo1217:20180916111812p:plain

 

③例えば、下記のように、文頭にアイコンフォントを入れたい場合。

f:id:chibo1217:20180916220350p:plain

文章を作成する画面で、タグのマークを選択します(赤枠の部分)。

f:id:chibo1217:20180916143913p:plain

④HTML入力モードになるので、ここに挿入したいアイコンのソースを貼ります。

f:id:chibo1217:20180916144222p:plain

※注意

 通常であれば  は必要ありませんが、jimdoの場合は必要みたいなので、忘れずに!

 

✖ <i class="far fa-arrow-alt-right"></i>

〇 <i class="far fa-arrow-alt-right">&nbsp;</i>

 

参考:Using Font Awesome Icon Font - Expanding Jimdo

 

jimdoをカスタマイズされたい方の参考になれば!