スポンサーリンク

スポンサーリンク

ブログ WordPress

Font Awesomeを使ってみた!

2018年8月5日

2018年8月7日 追記

 

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

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

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

 

 
 

Font Awesomeとは

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は簡単なものしか知らないので、私がわかる範囲で作ってみました(^^;)

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

 

参考にした記事

 
 
2018年8月7日 追記

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

私は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 ⇒ Blog People

お問い合わせはこちら Contact

 

 

おすすめ

おすすめ

-ブログ, WordPress
-

Scroll Up

Copyright© きらり☆彡 , 2018 All Rights Reserved Powered by STINGER.