Font Awesomeとは？

ウェブサイトやブログでWebアイコンフォントを表示出来るようにしてくれるサービスです。このブログにも多用しています。ともすれば味気ないブログの記事に、一服の清涼感を与えてくれますね。

例えば 「矢印」とか、他にも

このようなアイコンを表示することが出来ます。

<i class="fas fa-pen-nib fa-fw"></i>　ペン
<i class="fas fa-envelope fa-fw"></i> メール
<i class="fas fa-hospital fa-fw"></i>　病院

Font Awesomeを使うメリット

WordPressでの使用方法

こちらのホームページにアクセス(PCの場合) 英語のホームページですが、やることはいたって簡単です笑

Font Awesome

Get vector icons and social logos on your website with Font Awesome…続きを読む

導入の手順

コードのコピー

こちらにもコードを用意しています。 コピーしてお使いください。

<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.4.1/css/all.css" 
integrity="sha384-5sAR7xN1Nv6T6+dT2mhtzEpVJvfS3NScPQTrOxhwjIuvcA67KV2R5Jz6kr4abQsz" crossorigin="anonymous">

「header.php」に貼り付け

これでフォントを使用する準備が出来ました。実際にホームページから好きなフォントを使ってみましょう。フリー版だと現在1,388個のフォントが使えます。

例えば自動車の場合「car」と入力

コードをコピーして完了です。

<i class="fas fa-car"></i>

もし半角スペースを入れても間隔が開かない場合は、『テキストモード』で次のように入力してください。

 

見出しの前にFont Awesomeを表示する方法

例えば見出し2の前に（シェブロンマーク）をつけたいという場合は次のように指定します。

<h2> 見出し2</h2>

h2:before
{
  font-family: "Font Awesome 5 Free";
  content: "\f138";
　font-weight: 900;
  padding-right : 5px;/*文字との隙間*/
  color: #○○○○○○;/*アイコンの色はお好みで*/
}

FontAwesome5からはCSSでアイコンを表示する場合に、font-weightも合わせて指定する必要があります。Solidタイプのアイコンを表示するときにはfont-weight: 900;を、Regularタイプのアイコンを表示するときにはfont-weight: 400;を合わせて書きましょう。

便利な使い方

ほとんど決まったアイコンを使用するのにその度ホームページを開くより、便利な方法があります。

『日本語入力』で単語登録

例えば自動車の場合、「じど」の2文字で単語登録をします。（2文字で登録した方が統一しやすく、早く打てるし連想しやすいからです）

『スニペット』アプリで単語登録

私は「Copied」と言うクリップボード拡張アプリを使ってFont Awesomeを管理していますが、一覧性があってとても便利です。

iCloudで同期が出来るので、iPhone・iPad・Macで使用出来ます。
「Copied」の紹介記事はこちらです。
【copied】コピペを楽にしてくれる便利なクリップボード拡張ソフト
ダウンロードはこちらからどうぞ

Copied

Kevin Chang無料posted withアプリーチ

まとめ

フリーでも充分なのですが、有料版を使いたいという方は＄60支払えば、4,357個のフォントが使えます。よろしければ試してみて下さい。

以上、お読みいただきありがとうございました

にほんブログ村に登録しています