FontAwesomeを通常のアプリ(Word,Excel,PowerPoint等)で使う方法

tip-fontAwesome-pc-0
WEB / プログラミング / IT系

こんにちは! あますた(@amaguristar)です。

先日紹介したフリーアイコンが使える『Font Awesome』。

  • 「ネットでの使い方は分かったけどPCではどうやって使うの?」

と聞かれて、「そういえば説明してなかったな」と思い今回は、

  • Font AwesomeをWordやPagesで使いたい」
  • 「ExcelやNumbersでアイコン使いたい」

そんな方向けの使い方紹介です。

FontAwesomeって何って方は↓↓↓
>> https://fun.wazn.jp/info/512

サイトで使う時は↓↓↓
>> https://fun.wazn.jp/info/563/

目次[ open / close ]
  1. ファイルをダウンロード
  2. フォントのインストール
  3. 実際の使い方
  4. まとめ

動画でも紹介してます↓↓↓
>> https://youtu.be/IbWEjGKbQTw

ファイルをダウンロード

PC(Mac or Windows)で利用する場合はアイコンファイルをダウンロードする必要があります。ダウンロードの仕方は簡単で、下記リンクからFont Awesomeのサイトへ移動。

FontAwesome公式サイト↓↓↓
>> https://fontawesome.com/

Start for Freeでデータを参照
Start for Freeでデータを参照

Start for Freeをクリック。

Desktopを選択
Desktopを選択

サイトをスクロールすると中程に「Desktop」というものがありますので、そちらをクリック。

Download Font Awesome Free for the Desktopを選択
Download Font Awesome Free for the Desktopを選択

すると上記画面が表示されますので、「Download Font Awesome Free for the Desktop」を押してファイルをダウンロード。

容量は2.3MBと軽いので直ぐにダウンロードが完了します。

ダウンロードされたファイル
ダウンロードされたファイル

注意!
ファイル名についてる数字(今回は、5.15.4)は、バージョンです。その為、タイミングにより数字が違う可能性があります。数字が違っても気にせず進めてください。

フォントのインストール

ダウンロードが完了すると、「fontawesome-free-5.15.4-desktop.zip」という圧縮ファイルがありますので、ダブルクリックして解答。

注意!
ファイル名についてる数字(今回は、5.15.4)は、バージョンです。その為、タイミングにより数字が違う可能性があります。気にせず進めて下さい

解凍後のフォルダの中身
解凍後のフォルダの中身

解凍すると上記ファイルが出現。LICENSE.txtには利用上の注意などがありますので利用前に一度目を通しておいてください。

内容は英語表記なので、英語が苦手な方は「DeepL翻訳」を使うとサッと読めて便利です(詳細は下記リンク参照)。

`otfs`フォルダ内の「.otf」ファイルをダブルクリックしてインストール
`otfs`フォルダ内の「.otf」ファイルをダブルクリックしてインストール

PCで利用できる様にする為には解凍した「otfsフォルダ」内にあるフォントをシステムにインストールする必要があります。

インストールの仕方は簡単で、Windows・Macともに「.otf」ファイルをダブルクリックするだけでインストール可能。

注意!
自分の環境はMacなので、マックでのみ確認。Windowsは知り合いがダブルクリックにてインストールできることを確認

フォントをインストール
フォントをインストール

.otf」ファイルをダブルクリックするとMacの場合は上記ウィンドウがポップするので、右下の「フォントをインストール」を押してインストール。

注意!
全ての.otfファイルをインストールしてください

これで利用する準備は完了です。

実際の使い方

実際の使い方は下記手順。

  1. 使いたいアイコンを選択
  2. アイコンのユニコードを取得
  3. 使いたいアプリ(Word・Excel・Numbers・Pagesなど)で貼り付け
  4. サイズ・色等を好きな様にカスタム

ざっとあげると上記5手順ですが、使いたいアイコンのユニコードを取得以降は通常のフォントと同じ様に設定するだけの簡単仕様。それぞれ詳しく説明します。

使いたいアイコンを選択

Font Awesomeの公式サイトで使いたいアイコンを選択。

FontAwesome公式サイト↓↓↓
>> https://fontawesome.com/

使いたいアイコンを探す
使いたいアイコンを探す

公式サイトの検索ウィンドウもしくは、左のカテゴリを利用してアイコンを検索。

注意!
検索ウィンドウを利用する場合は、英語で入力する必要あり。例:レジアイコンを使いたい場合は、「register」と入力

アイコンを見つけたらユニコードを取得。

アイコンのユニコードを取得

ユニコードの取得方法はとても簡単。

ユニコードの取得
ユニコードの取得

使いたいアイコンの下に書かれた数字が、ユニコードです。数字の横にあるアイコンをクリックすると、クリップボードにコピーできます。

万一、コードが表示されてない場合は、

チートシート表示をオンにする
チートシート表示をオンにする

アイコンリストの右上にある上記マークをクリックすると直ぐに表示されます。

使いたいアプリ(Word・Excel・Numbers・Pagesなど)で貼り付け

Font Awesomeでコピーしたコードを貼り付ける
Font Awesomeでコピーしたコードを貼り付ける

ユニコードをコピーしたら好きなアプリで貼り付けるだけ。通常、そのまま貼り付けると上記の様に文字化けしますが、

フォントを設定
フォントを設定

利用するフォントをはじめにインストールした「Font Awesome 5 Free」にすると表示されます。

注意!
利用したいフォントがロゴ系の場合は、「Fnot Awesome Brands」に設定する必要があります。

注意!
アイコンによっては、「フォントを変えたけど表示されない」ものもありますが、その場合は、「Solid」を「レギュラー」に変更するか、 ボールド設定(Bのボタン)を外して下さい。それでも表示されない場合は、インストール方法を間違えてるか、フリー版では使えないアイコンです

サイズ・色等を好きな様にカスタム

色やサイズを設定
色やサイズを設定

Font Awesomeのアイコンは、通常のフォントと同じ様に色やサイズを設定可能です。

フォントの設定は利用するアプリにより異なりますので詳細は割愛。

まとめ

一度設定すればいつでも自分の好きなアプリで利用可能な「Font Awesome」。ちょっとした文章にアイコンを追加するだけで見栄えが全く違います。

普段利用する資料にちょっとしたワンポイントがあるだけでも、書類整理に役立ったりすると思いますので、ぜひ利用して見てはいかがでしょうか?

動画でも紹介してます↓↓↓
>> https://youtu.be/IbWEjGKbQTw

FontAwesomeのまとめ一覧↓↓↓
>> https://fun.wazn.jp/info/969/

あますた

7,553 views

電気工学科卒の元プログラマの現飲食店オーナー。間に不動産管理、営業等も経験。ここでは、自分の経験とお客様に聞いた話を基に、役立つ情報を発信していこうと思いま...

プロフィール

ピックアップ記事

関連記事一覧

  1. この記事へのコメントはありません。

CAPTCHA


ABOUT

”わくわく”や”驚き”等、『心の栄養』を与えられる、『楽しい』でつながるWebメディアを目指します。
ABOUT

最新記事