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

もっと簡単にアイコンを付けられないか・・・と調べていくうちに発見。

これまでに公開した中で最も簡単な方法だと思います。

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">&nbsp;</span>

5. アイコンを付けたい文章の「HTMLの編集」から貼り付ける

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

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

文字とアイコンの間にスペースを入れる

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

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

6. 矢印の方向を反転させる

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

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

etc... リストや、見出しにも使えます。

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

その他のオプション

fa-spin アニメーション機能(回転)

<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

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


この記事がいいなと思ったらメールマガジンに登録していただけると嬉しいです。
メールアドレスを入力して登録ボタンを押してください。


株式会社 PIK

〒108-0075 港区港南3-4-12

TEL.03-6433-0422