WEBフォントのアイコンを使いたい

Font Awesomeのサービスを使ってＷEBフォントを使用したアイコン設定する。

Font Awesomeというサイトがあります。

GPLで提供されている、商用利用、改変、再配布にいたるまで自由に利用して良いというライセンスつきのＷＥＢフォントを公開しているのです。これが無料でダウンロードさせてもらえる。

ところがJimdoはダウンロードしたデータを利用することが出来ない。なぜならJimdoにはこれらのファイルをアップロードする機能がないからです。

では、利用できないの？っていうと、実はリンクを貼るだけで、利用できるようにしてくれているんです。ありがたいじゃないですか。

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css">

この一行を、設定＞ヘッダー部分を編集に貼り付けて保存します。

http://h2ham.net/font-awasome

使い方は、class名に指定されたクラス名を設定するだけです。
用意されているクラス名を変更するだけで、アイコンの種類、大きさ、方向、そして回転などの動きを設定することが出来ます。

Font Awesome（文字、驚愕「すごい」）っていう名前はただものじゃないなと。

 さぁそれでは始めましょう！

Font Awesome　> iconsのページへ移動

<i class="fa fa-reply-all"></i>　⇒　<span class="fa fa-reply-all">&nbsp;</span>

<p><span class="fa fa-reply-all">&nbsp;</span>こんな感じになりました！</p>

 こんな感じになりました！

<p><span class="fa fa-reply-all fa-fw">&nbsp;</span>こんな感じになりました！</p>

 こんな感じになりました！

<p><span class="fa fa-reply-all fa-fw fa-flip-horizontal">&nbsp;</span>こんな感じになりました！</p>

 こんな感じになりました！

リストや見出しに使う方法は、リストと見出しのコーナーで説明します。

<p><span class="fa fa-spinner fa-spin">&nbsp;</span>  回転1</p>

<p><span class="fa fa-refresh fa-spin">&nbsp;</span>  回転2</p>

<p><span class="fa fa-cog fa-spin">&nbsp;</span>  回転3</p>

  回転1

  回転2

  回転3

<p><span class="fa fa-hand-o-right">&nbsp;</span>　Normal</p>

<p><span class="fa fa-hand-o-right fa-rotate-90">&nbsp;</span>　fa-rotate-90</p>

<p><span class="fa fa-hand-o-right fa-rotate-180">&nbsp;</span>　fa-rotate-180</p>

<p><span class="fa fa-hand-o-right fa-rotate-270">&nbsp;</span>　fa-rotate-270</p>

<p><span class="fa fa-hand-o-right fa-flip-horizontal">&nbsp;</span>　fa-flip-horizontal</p>

<p><span class="fa fa-hand-o-right fa-flip-vertical">&nbsp;</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

大きくしてもキレイです！