【Better Font Awesome】の使い方を図解解説!Webアイコンをサクッと設置できるWordPressプラグイン

当ページのリンクには広告が含まれています。

【Better Font Awesome】の使い方

この2つのテキストリンク、どちらが見た目きれいですか?

はい。下のテキストリンク前に矢印のアイコンがあったほうが、リンクだということを強調していてデザイン的にもスッキリしてきれいに見えますよね。

実はこのアイコン、画像ではなく「Font Awesome」というアイコンを文字として扱うことを可能にしたサービスを利用して設置しています。

この記事では「Font Awesome」のWebアイコンを投稿エディターで簡単に設置できるWordPressプラグイン『Better Font Awesome』のインストール手順、使い方(基礎編・応用編)について解説しています。

テキストリンクの前に矢印Webアイコンを使うことをおすすめします!

『Font Awesome』とは?

Font Awesomeとは?

Font Awesomeとは、サイトやブログでよく使われているアイコンをアイコンフォントという文字として使うことができる画期的で超便利なツールです。

画像ではなく文字なので、大きさや色などを変更することが可能なので、SNSへの誘導や、見出しの前のアクセントなど、いろんな場面で使うことが出来ます。

『Font Awesome』ホームページはこちら

FontAwesome5.9が今の最新バージョン

FontAwesome5.9最新バージョン

FontAwesome5.9は、2019年6月4日ににリリースされたFontAwesomeの最新バージョンで、421個の新しく改良されたアイコンが含まれています。

FontAwesome5.9には、無料プランと有料のPROプラン(年間99ドル)があります。

無料プランでも、1,534個のアイコンが使えるので十分ですね。

『Better Font Awesome』で出来ること

『Better Font Awesome』でできること。

Font Awesomeは、定期的にアイコンが更新がされており、その都度新しいアイコンフォントが追加されていますが、『Better Font Awesome』は、最新のアイコンフォントを自動的に取得してくれる優れものです。

『Better Font Awesome』をインストールすると、投稿エディターのメニューに「insrt Icon」ボタンが追加され、ワンクリックでアイコンフォントを設置することができるようになります。

では、『Better Font Awesome』のインストール手順と使い方について説明しましょう。

『Better Font Awesome』のインストール手順

  1. Better Font Awesomeインストールプラグイン>新規追加をクリックします。
  2. Better Font Awesomeインストール『Better Font Awesome』を検索します。いちばん上に『Better Font Awesome』が表示されます。「今すぐインストール」をクリックしましょう。
  3. etter Font Awesomeインストール有効化をクリックしましょう。これで『Better Font Awesome』のインストールは完了です。

『Better Font Awesome』の使い方(基礎編)

  1. 『Better Font Awesome』の使い方
    『Better Font Awesome』が有効化されると、記事投稿エリアのメニューに「Insert Icon」のボタンが追加されます。WEBアイコンを設置する場所を指定後、クリックしましょう。
  2. 『Better Font Awesome』の使い方WEBアイコンの一覧が表示されます。「Type to filter」にキーワードを入れてアイコンを検索することもできます。設置するWEBアイコンをクリックしましょう。
  3. 『Better Font Awesome』の使い方WEBアイコンのショートコードが表示されます。プレビューで確認してみましょう。
  4. 『Better Font Awesome』の使い方はい。指定したWEBアイコンがきれいに表示されました。
  5. 『Better Font Awesome』の使い方今度はWEBアイコンに色を付けてみましょう。ショートコードを選択した状態で、テキスト色から変えたい色を指定します。
  6. 『Better Font Awesome』の使い方ショートコードの色が変わりました。プレビューで確認してみましょう。
  7. 『Better Font Awesome』の使い方
    はい。指定した「赤」にWEBアイコンがかわりました。
好きなWEBアイコンを選択して、色も変えれる!使えますね。

『Better Font Awesome』の使い方(応用編)

ここからは、ちょっと上級者向けの応用編を解説していきましょう。

  1. 『Better Font Awesome』の使い方応用編設定に『Better Font Awesome』が追加されています。クリックしましょう。
  2. 『Better Font Awesome』の使い方応用編Better Font Awesomeの設定画面が開きます。英語でわかりずらいですね。解説しましょう。

    Version
    『Font Awesome』のバージョンを指定できます。デフォルトの「Always Latest」ままでOKです。

    Use minified CSS
    縮小版のCSSを使うか、使わないかを選択できます。デフォルトのチェックが入った状態でOkです。

    Remove existing Font Awesome
    前にインストールされている『Font Awesome』を削除するかを選択できます。チェックなしでOKです。

    Hide admin notices
    エラーメッセージを表示するか、しないかを設定することが出来ます。デフォルトのチェックが入ってない状態でOkです。

  3. 『Better Font Awesome』の使い方応用編Font Awesome version 4.xでショートコード・HTMLコードを解説しています。

    classに「fa-2x」を追記することでWebアイコンサイズが倍になります。数値を変えることでサイズを大きくすることが出来ます。

    またclassに「fa-rotate-90」を追記することでアイコンを右に90度回転させることが出来ます。「fa-rotate-180」では上下逆になりますね。

WEBアイコンのサイズアップはいろんな場面で使えますよ。[

まとめ

Better Font Awesomeのまとめ

ザックリ『Better Font Awesome』説明してきましたが、あなたのWordPrsessサイトに取り入れて損はないと思います。

WEBアイコンはホントにちょっとしたデザインの気遣いですが、その小さい積み上げがサイトのクウォリティを上げて、ユーザビリティーに貢献することにつながると思います。

『Better Font Awesome』は「 jsDelivr CDN」を使っているので容量的にとても軽いです。また他のFont Awesome系のプラグインとバッティングすることはありません。

あなたも是非『Better Font Awesome』を取り入れて、サイトデザインのクウォリティをUPさせましょう。

よく読まれている関連記事

Mikomiレビュー
【Mikomi】スクイーズページ作成用WordPressプラグインの使い方徹底レビューと特典のご紹介
メルマガや見込み客のリスト取りをしているけど、なかなか集めることができないと悩んでいる方は多いと思います。 そんな悩みを抱えている方に朗報です。 メールアドレスを登録し
2019-07-13 20:35
『Remove Image Background』の使い方
『Remove Image Background』の使い方!たった5秒で画像の背景を白抜き切り取りできるWEBサービス
通常、画像の人物や商品を切り抜く場合、イラストレーターやPhotoShopを使う方が多いと思いますが、使い慣れている人でも結構時間がかかってしまいます。 「Remove Im
2019-06-27 21:51
アフィリエイトで稼ぎたいならメンタルブロックをブチ壊せ!
ここ最近こんな内容の質問を多く受けます。 「アフィリエイトを1年やっていますが 収益が ほとんどありませんが、どうすればいいですか?」 答えは明白です。
2015-07-02 21:46

この記事が気に入ったら
いいね ! しよう

この記事を書いた人

One Response to “【Better Font Awesome】の使い方を図解解説!Webアイコンをサクッと設置できるWordPressプラグイン”

コメントを残す

最新の記事