ただいまの人気記事はこれ!おすすめ記事いろいろ

新しくなったFont Awesomeで、旧バージョンの4.7.0を使う方法

WEB
当サイトでは記事内に広告を掲載しています。

手軽にWebアイコンフォントを使える「Font Awesome」が新しくなり、バージョン5となりました。

レイアウトだけでなく文字コードも、これまでのバージョン4.7.0と大きく変わり、混乱している人も多いかと思います。

そこで今回は、新しくなったFont Awesomeで旧バージョンの4.7.0を使う方法を紹介します。

Font Awesomeの旧バージョン4.7.0を使うには

1.まずは、Font Awesomeにアクセスしてみましょう。デザインも操作も新しくなった「バージョン5」の画面がでてきます。

新しくなったFont Awesome バージョン5

 

2.旧バージョンの4.7.0を使いたい時は、画面を下にスクロールし、「Version 4 files+Docs」をクリックします。

「Version 4 files+Docs」をクリック

 

または、画面を一番下までスクロールして「Old Version 4.7」をクリックでもOKです。

旧バージョンはOld Version 4.7をクリック

 

3.すると、これまでのバージョンの4.7.0の画面がでてきます。

Font Awesome 4.7.0の画面に

 

4.メニューにある「Icons」をクリックすれば・・・

Iconsをクリックで、旧バージョンの4.7.0が使えます

 

これまでと同じように使えますよ!

 

画像名

これなら文字コードもそのままで、今までどおりに使えるので安心ですね。

FontAwesome 4.7.0の使い方

では、FontAwesome 4.7.0の使い方をみてみましょう。

記事などで使う場合(HTML)

1.アイコンの並んでいる画面で、使いたいアイコンを探します。

FontAwesome 4.7.0の使い方

 

2.使いたいアイコンをクリックします。ここでは「下むきの矢印」を選んでいます。

FontAwesome 4.7.0 アイコンを選ぶ

 

3.コードが表示されるので、それをコピーします。

FontAwesome 4.7.0 コードをコピーする

 

4.アイコンを入れたいところに、先ほどのコードを入力します。

FontAwesome 4.7.0 コードをペーストする

 

5.下向きの矢印が表示されました!

FontAwesome 4.7.0 表示例

 

画像名

このように、画像を用意しなくても簡単にアイコンを入れることができるのが、Webアイコンの利点ですよ!

CSSで使う場合

FontAwesomeをCSSで使う場合は、HTMLとは入力の仕方がかわります。

 /(スラッシュ) のあとに、指定のコードを入れて使います。

 

コードはアイコンを選んだ画面の、この部分に出ています。

FontAwesome 4.7.0をCSSで使う方法

この場合は「f046」ですね。

 

このコードを「content:」のうしろにある 「 ” ” 」の中に、「/f046」というようにスラッシュにつづけて入れます。

FontAwesomeのコードを入力(CSS)

 

表示されました!

表示例

 

このようにすると、CSSでもFontAwesomeが使うことができます。

 

画像名

CSSのコードを調べるのが面倒な場合は、一覧になったページもありますよ!

Font Awesome Icon List (with charcode)

まとめ

今回はバージョン5になったFont Awesomeで、旧バージョンの4.7.0を使う方法でした。

バージョン5になって便利になったものの使い方が大きく変わったFont Awesome。従来のバージョンから変更する場合は、文字コードの再取得などいろいろと大変です。

4.7.0を使いたいという方はぜひ参考にしてみてくださいね。

SimplicityでFont Awesomeを使ってみよう
Simplicityには、「Font Awesome」がデフォルトで使えるようになっています。 「Font Awesome」とは、手軽に使えるアイコンフォントのことで、たとえば手紙なら「」、電車なら...
スポンサーリンク
WEB
ゆずゆろぐ。の本が出ました!
ゆずゆろぐ。の本が出ました! 完全書きおろし、Amazonで販売中です。興味のある方はぜひどうぞ!
ゆずゆをフォローする
この記事を書いた人
ゆずゆ

読むと、ちょっぴり役に立つ&たのしくなるコンテンツを発信しています。クッピーラムネとAmazonのFire HD8がお気に入り。雑貨マニア。

ゆずゆをフォローする
ゆずゆろぐ。
タイトルとURLをコピーしました