スポンサーリンク

Font Awesomeを使ってみた!

2018年8月5日

使用テーマ STINGER PLUS2

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

といってもアイコンフォントはプラグインなどで使っていたのですが、プラグインでは使えないアイコンもあります。なのでプラグインではなくツールを使ってみることにしました。

Font Awesomeとは

「アイコンフォントFontAwesomeなに?」と思う人もいると思います。

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間に以下のコードを追加してください。

<link href="//netdna.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">

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

最後に

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

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

スポンサーリンク
応援よろしくお願いします。
      ブログランキング・にほんブログ村へ
   Blog People
お問い合わせはこちら
この記事を書いた人

結耶(ゆうや)

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