Font Awesomeを使ってみた!

2018年8月5日

 使用テーマ    STINGER PLUS2

 

 
アイコンフォント『Font Awesome』というものを使ってみました。

といってもプラグインなどで使えたりしていたのでそちらで使っていたのですが、プラグインでは使えないこともあったので使ってみました。

「使い方は難しいのかな?」と思っていましたが、やってみたら意外と簡単でした!

 
[toc]

 
 

Font Awesomeとは

Font Awesomeとはアイコンを文字として扱うことを可能にしたツールです。画像ではなく文字なので、大きさや色などを変更することが可能!ところが説明は英語でかつ、ソースをコピーしてHTMLに書き込むなど、初心者にはなかなか難しいツール。

『ホームページ大学 ペライチ』より引用

 
ネット上で こんなアイコン見たことがあると思います。
Font Awesomeとはこのアイコンを文字として利用できるものです。
アイコンを文字として使えるのでCSSを使って大きくしたり、色を変えたりすることもできます。

 
 

Font Awesomeの使い方

FontAwesomeは『+サーバーから読み込んで表示』させるため、インストールなどは必要ありません。FontAwesomeを使うには基本的にやることはふたつです。

  • HEAD間にFontAwesomeを表示させるためのコードをコピーして貼り付ける
  • 使いたいアイコンのコードをコピーして記事に貼る

 
基本的にはこれだけで使うことができます。

HEAD間に入れるコードは『Webフォント』、『SVG』の2種類あります。(どちらかを使います。)
私では違いがわかりませんので、導入方法で参考にさせてもらった記事のリンクを貼っておきますのでこちらを参考にしてください。

 
使い方は非常に簡単です。また、<head>~</head>間に表示させるためのコードが入れられれば無料ブログなどでも使うことができます。
記事中に挿入する方法は使いたいアイコンを選択してコードをコピーして記事に貼り付けるだけです。

 

きらり

きらり

結耶はFont Awesomeを使って何がしたかったの!?
結耶

結耶

リストが作りたかったの。

 

スポンサーリンク

 
 

Font Awesomeを使ったリスト

いろんな人のサイトをみて、前々から「おしゃれなリストいいなぁ」と思っていました。
おしゃれなリストにはよくFont Awesomeが使われているので今回「やってみよう!」と思ったわけです(^^;)

で、作ったのが▼これです。

タイトル
  • ここに文字
  • ここに文字

 
私はHTMLやCSSは簡単なものしか知らないので、私がわかる範囲で作ってみました(^^;)

 

結耶

結耶

これだけ作るのに結構時間かかっちゃったよ(汗)
きらり

きらり

お疲れ様~!

 

参考にした記事

 
 
2019年2月12日
   この記事は以前使っていたテーマ『STINGER PLUS2』のものです。(現在テーマを変更しています。)

テーマで使われていたアイコンが表示されない

私はWordPressのテーマは『Stinger Plus2』を使っています。
Stinger Plus2ではソーシャルボタンにFont Awesomeが使われています。(コードを入力すれば他のアイコンフォントも使えます。)

私はStinger Plusで使えることも知らず最新バージョンのFont Awesomeを導入しました。
すると…ソーシャルボタンのアイコンが表示されなくなってしまいました(^^;)

 

対処方法

Stinger Plusで使われているFont Awesomeは旧バージョンです。
なのでHEAD間に以下のコードを追加してください。

 
これでソーシャルボタンのアイコンが表示されると思います。

 
 

最後に

WordPressのプラグインでFont Awesomeを簡単い使えるものがあります。
Better Font Awesome』を使えば記事作成画面から呼び出すことができ、記事中にショートコードで貼り付けられます。
また、アイコンの大きさや色もCSSで変えることができます。

ただし、プラグインではCSSでのフォント指定ができません。
記事中に挿入するだけなら非常に便利なプラグインです。

 

スポンサーリンク

 

応援よろしくお願いします。
      ブログランキング・にほんブログ村へ
   Blog People
お問い合わせはこちら

 

この記事を書いた人

結耶(ゆうや)

2017年9月からブログ、アフィリエイトをはじめた駆け出しです。ブログやWordPress、アフィリエイトを勉強しています!
多発性硬化症(MS)という難病と闘っています。