デザイン

超便利!絵文字みたいなアイコンフォント「Font Awesome」の使い方

超便利!絵文字みたいなアイコンフォント「Font Awesome」の使い方
こんにちは! Webデザイナーのアズサ(@azusascom)です。

以前「ブログが重くなる?WordPressで絵文字を使っちゃダメな3つの理由」って記事を書きました。

でも、絵文字使いたいって声をいただいたんです。SNSとかで絵文字使うから、ブログでも使いたいって思いますよね。

そこで今回は、絵文字のように使えるWebアイコンフォントの使い方をご紹介します。

絵文字のように使えるアイコンフォント

アイコンフォントとは、Web上で文字と同じように表示できるアイコンのこと。絵文字のように、ブログの表現が広がります。

当ブログでは冒頭のあいさつでTwitterアイコン(@azusascom)を使ってますが、これもアイコンフォント。

他にもこんなアイコンがありますよ

Webフォントを知ってる場合は、Webフォントのアイコンバージョンだと思ってください。

その昔、アイコンは画像で作ってました。しかし、画像をひとつずつ用意してアップロードしなければならなかったんです。

アイコンフォントなら画像は必要ありませんよ。事前に簡単な設定をするだけで使えるんです。

アイコンフォントのメリット
  • 画像を用意しなくていい
  • 画像より軽い
  • CSSでサイズや色を変えられる
  • アニメーションで動きをつけられる
  • 無料で利用できる

もうメリットだらけ。使わない手はないですね。

Font Awesomeとは

Font Awesomeトップページ

Font Awesome

Font Awesomeはアイコンフォントを配布してるサービスのひとつです。

外部サーバーにアイコンフォントのデータがあるので、外部サーバーのリンクを設置するだけで使用可能。

矢印やメールなどの基本的なアイコンから、AmazonやTwitterなどのブランドロゴのアイコンまでそろってます。

しかも、1500個のアイコンが無料で使えちゃうんです。ありがたや。

利用登録なども必要ないので、すぐに使えますよ。

Font Awesomeの事前準備

今回はおすすめの「専用の外部サーバーからアイコンデータを読み込む」という方法をご紹介。

自分のサーバーにダウンロードする方法より、サーバーへ負荷がかからず、事前準備も簡単なので。

では準備しましょう。

1.公式サイトでコードをコピーする

以下リンクをクリックし、Font Awesomeの「Start」ページを開きます。

Font Awesome > Start

Font Awesome Startページ

コード右下の「Copy Code」をクリックし、コードをコピーします。

2.head内に貼り付ける

自分のブログのheadタグ内に、さきほどコピーしたコードを貼り付けて保存します。

WPテーマ「JIN」の場合、HTMLタグ設定の【head内】に貼り付けて、「変更と保存」ボタンを押します。

他テーマの場合、テーマエディターから「header.php」を開き、headタグ内に貼り付けます。

テーマエディター「header.php」編集ページ

最後に「ファイルを更新」をクリックします。

貼り付ける場所の詳細は、サポートサイトやマニュアルをご確認ください。

Font Awesomeの使い方

ここからは、記事にアイコンを表示させる方法です。

1.アイコンを検索する

以下リンクをクリックし、アイコン一覧を開きます。

Font Awesome > Icon

Font Awesome アイコン一覧

色が濃いものが無料で利用できるアイコンです。

「Free」をクリックすると無料で使えるアイコンだけ表示されますよ。

カテゴリーから選んだり、英語で検索したりしてくださいね。

2.アイコンフォントのコードをコピーする

アイコン一覧で使用するアイコンをクリックすると、以下のようなページが表示されます。

Font Awesome アイコン詳細

赤枠内のコードをクリックし、コピーします。

3.自分のブログに貼り付ける

アイコンフォントを使いたい記事の編集画面を開きます。

WordPress編集画面

テキストタブをクリックし、アイコンを表示させたい場所に貼り付けます。

プレビューで確認して問題なければ「更新」ボタンを押しましょう。

アイコンフォント設置完了

これで完了!

アイコンフォントで楽しく飾ろう

今回は、WebアイコンフォントのFont Awesomeをご紹介しました。

  • アイコンフォントとは、Web上で文字と同じように表示できるアイコンのこと。
  • 画像より軽い。
  • Font Awesomeでは無料で1500個のアイコンが使える。
  • 公式サイトでコードをコピーし、自分のブログに貼り付けるだけで使える。

アイコンがあるとわかりやすくなりますね。ポイント使いがおすすめ。

簡単なのでぜひ設定してみてくださいね。

Font Awesome > Start

色や大きさを変える方法は「【Font Awesome】アイコンフォントの色・大きさを変える方法」って記事で書いてるので、よかったら読んでみてくださいね。

ではでは。

稼ぐ力を身につけて運命を変えよう!
ビジネスの勉強、試してみる価値あるかも。

COMMENT

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です