もっと簡単にアイコンを付けられないか・・・と調べていくうちに発見。
これまでに公開した中で最も簡単な方法だと思います。
Font Awesomeのサービスを使ってWEBフォントを使用したアイコン設定する。
Font Awesomeというサイトがあります。
GPLで提供されている、商用利用、改変、再配布にいたるまで自由に利用して良いというライセンスつきのWEBフォントを公開しているのです。これが無料でダウンロードさせてもらえる。
ところがJimdoはダウンロードしたデータを利用することが出来ない。なぜならJimdoにはこれらのファイルをアップロードする機能がないからです。
では、利用できないの?っていうと、実はリンクを貼るだけで、利用できるようにしてくれているんです。ありがたいじゃないですか。
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css">
この一行を、設定>ヘッダー部分を編集に貼り付けて保存します。
▼ タグの貼り付け方はここ マウスを当てると画像が開きます。
使い方をいくつか説明します。
正直ビックリしました!
使い方は、class名に指定されたクラス名を設定するだけです。
用意されているクラス名を変更するだけで、アイコンの種類、大きさ、方向、そして回転などの動きを設定することが出来ます。
Font Awesome(文字、驚愕「すごい」)っていう名前はただものじゃないなと。
さぁそれでは始めましょう!
1. まず、本家のサイトから、クラス名を取得
2. 使いたいアイコンをクリック

3. コードをコピー

4. コピーしたデータをJimdo用に書き直す。
<i class="fa fa-reply-all"></i> ⇒ <span class="fa fa-reply-all"> </span>
5. アイコンを付けたい文章の「HTMLの編集」から貼り付ける
<p><span class="fa fa-reply-all"> </span>こんな感じになりました!</p>
こんな感じになりました!
文字とアイコンの間にスペースを入れる
<p><span class="fa fa-reply-all fa-fw"> </span>こんな感じになりました!</p>
こんな感じになりました!
6. 矢印の方向を反転させる
<p><span class="fa fa-reply-all fa-fw fa-flip-horizontal"> </span>こんな感じになりました!</p>
こんな感じになりました!
etc... リストや、見出しにも使えます。
リストや見出しに使う方法は、リストと見出しのコーナーで説明します。
その他のオプション
fa-spin アニメーション機能(回転)
<p><span class="fa fa-spinner fa-spin"> </span> 回転1</p>
<p><span class="fa fa-refresh fa-spin"> </span> 回転2</p>
<p><span class="fa fa-cog fa-spin"> </span> 回転3</p>
回転1
回転2
回転3
回転と反転
<p><span class="fa fa-hand-o-right"> </span> Normal</p>
<p><span class="fa fa-hand-o-right fa-rotate-90"> </span> fa-rotate-90</p>
<p><span class="fa fa-hand-o-right fa-rotate-180"> </span> fa-rotate-180</p>
<p><span class="fa fa-hand-o-right fa-rotate-270"> </span> fa-rotate-270</p>
<p><span class="fa fa-hand-o-right fa-flip-horizontal"> </span> fa-flip-horizontal</p>
<p><span class="fa fa-hand-o-right fa-flip-vertical"> </span> fa-flip-vertical</p>
Normal
fa-rotate-90
fa-rotate-180
fa-rotate-270
fa-flip-horizontal
fa-flip-vertical
フォントにあわせて大きくしたい場合
<p style="font-size: 200%;"><span class="fa
fa-hand-o-right"></span> BIG</p>
BIG
大きくしてもキレイです!
コメントをお書きください