FontAwesomeを通常のアプリ(Word,Excel,PowerPoint等)で使う方法
![tip-fontAwesome-pc-0](https://i0.wp.com/fun.wazn.jp/wp-content/uploads/2021/08/tip-fontAwesome-pc-0.jpg?fit=1920%2C1080&ssl=1)
こんにちは! あますた(@amaguristar)です。
先日紹介したフリーアイコンが使える『Font Awesome』。
- 「ネットでの使い方は分かったけどPCではどうやって使うの?」
と聞かれて、「そういえば説明してなかったな」と思い今回は、
- 「Font AwesomeをWordやPagesで使いたい」
- 「ExcelやNumbersでアイコン使いたい」
そんな方向けの使い方紹介です。
FontAwesomeって何って方は↓↓↓
>> https://fun.wazn.jp/info/512
サイトで使う時は↓↓↓
>> https://fun.wazn.jp/info/563/
動画でも紹介してます↓↓↓
>> https://youtu.be/IbWEjGKbQTw
ファイルをダウンロード
PC(Mac or Windows)で利用する場合はアイコンファイルをダウンロードする必要があります。ダウンロードの仕方は簡単で、下記リンクからFont Awesomeのサイトへ移動。
FontAwesome公式サイト↓↓↓
>> https://fontawesome.com/
Start for Free
をクリック。
![Desktopを選択](https://i0.wp.com/fun.wazn.jp/wp-content/uploads/2021/08/tip-fontAwesome-pc-1.jpg?resize=1920%2C1080&ssl=1)
サイトをスクロールすると中程に「Desktop
」というものがありますので、そちらをクリック。
![Download Font Awesome Free for the Desktopを選択](https://i0.wp.com/fun.wazn.jp/wp-content/uploads/2021/08/tip-fontAwesome-pc-2.jpg?resize=1920%2C1080&ssl=1)
すると上記画面が表示されますので、「Download Font Awesome Free for the Desktop」を押してファイルをダウンロード。
容量は2.3MBと軽いので直ぐにダウンロードが完了します。
![ダウンロードされたファイル](https://i0.wp.com/fun.wazn.jp/wp-content/uploads/2021/08/tip-fontAwesome-pc-3.jpg?resize=1920%2C1080&ssl=1)
注意!
ファイル名についてる数字(今回は、5.15.4)は、バージョンです。その為、タイミングにより数字が違う可能性があります。数字が違っても気にせず進めてください。
フォントのインストール
ダウンロードが完了すると、「fontawesome-free-5.15.4-desktop.zip
」という圧縮ファイルがありますので、ダブルクリックして解答。
注意!
ファイル名についてる数字(今回は、5.15.4)は、バージョンです。その為、タイミングにより数字が違う可能性があります。気にせず進めて下さい
![解凍後のフォルダの中身](https://i0.wp.com/fun.wazn.jp/wp-content/uploads/2021/08/tip-fontAwesome-pc-4.jpg?resize=1920%2C1080&ssl=1)
解凍すると上記ファイルが出現。LICENSE.txt
には利用上の注意などがありますので利用前に一度目を通しておいてください。
内容は英語表記なので、英語が苦手な方は「DeepL翻訳」を使うとサッと読めて便利です(詳細は下記リンク参照)。
![`otfs`フォルダ内の「.otf」ファイルをダブルクリックしてインストール](https://i0.wp.com/fun.wazn.jp/wp-content/uploads/2021/08/tip-fontAwesome-pc-5.jpg?resize=1920%2C1080&ssl=1)
PCで利用できる様にする為には解凍した「otfsフォルダ
」内にあるフォントをシステムにインストールする必要があります。
インストールの仕方は簡単で、Windows・Macともに「.otf
」ファイルをダブルクリックするだけでインストール可能。
注意!
自分の環境はMacなので、マックでのみ確認。Windowsは知り合いがダブルクリックにてインストールできることを確認
![フォントをインストール](https://i0.wp.com/fun.wazn.jp/wp-content/uploads/2021/08/tip-fontAwesome-pc-6.jpg?resize=1920%2C1080&ssl=1)
「.otf
」ファイルをダブルクリックするとMacの場合は上記ウィンドウがポップするので、右下の「フォントをインストール」を押してインストール。
注意!
全ての.otf
ファイルをインストールしてください
これで利用する準備は完了です。
実際の使い方
実際の使い方は下記手順。
ざっとあげると上記5手順ですが、使いたいアイコンのユニコードを取得以降は通常のフォントと同じ様に設定するだけの簡単仕様。それぞれ詳しく説明します。
使いたいアイコンを選択
Font Awesomeの公式サイトで使いたいアイコンを選択。
FontAwesome公式サイト↓↓↓
>> https://fontawesome.com/
公式サイトの検索ウィンドウもしくは、左のカテゴリを利用してアイコンを検索。
注意!
検索ウィンドウを利用する場合は、英語で入力する必要あり。例:レジアイコンを使いたい場合は、「register」と入力
アイコンを見つけたらユニコードを取得。
アイコンのユニコードを取得
ユニコードの取得方法はとても簡単。
![ユニコードの取得](https://i0.wp.com/fun.wazn.jp/wp-content/uploads/2021/08/tip-fontAwesome-pc-8.jpg?resize=1920%2C1080&ssl=1)
使いたいアイコンの下に書かれた数字が、ユニコードです。数字の横にあるアイコンをクリックすると、クリップボードにコピーできます。
万一、コードが表示されてない場合は、
![チートシート表示をオンにする](https://i0.wp.com/fun.wazn.jp/wp-content/uploads/2021/08/tip-fontAwesome-pc-9.jpg?resize=1920%2C1080&ssl=1)
アイコンリストの右上にある上記マークをクリックすると直ぐに表示されます。
使いたいアプリ(Word・Excel・Numbers・Pagesなど)で貼り付け
![Font Awesomeでコピーしたコードを貼り付ける](https://i0.wp.com/fun.wazn.jp/wp-content/uploads/2021/08/tip-fontAwesome-pc-10.jpg?resize=1920%2C1080&ssl=1)
ユニコードをコピーしたら好きなアプリで貼り付けるだけ。通常、そのまま貼り付けると上記の様に文字化けしますが、
![フォントを設定](https://i0.wp.com/fun.wazn.jp/wp-content/uploads/2021/08/tip-fontAwesome-pc-11.jpg?resize=1920%2C1080&ssl=1)
利用するフォントをはじめにインストールした「Font Awesome 5 Free
」にすると表示されます。
注意!
利用したいフォントがロゴ系の場合は、「Fnot Awesome Brands
」に設定する必要があります。
注意!
アイコンによっては、「フォントを変えたけど表示されない」ものもありますが、その場合は、「Solid」を「レギュラー」に変更するか、 ボールド設定(Bのボタン)を外して下さい。それでも表示されない場合は、インストール方法を間違えてるか、フリー版では使えないアイコンです
サイズ・色等を好きな様にカスタム
![色やサイズを設定](https://i0.wp.com/fun.wazn.jp/wp-content/uploads/2021/08/tip-fontAwesome-pc-12.jpg?resize=1920%2C1080&ssl=1)
Font Awesomeのアイコンは、通常のフォントと同じ様に色やサイズを設定可能です。
フォントの設定は利用するアプリにより異なりますので詳細は割愛。
まとめ
一度設定すればいつでも自分の好きなアプリで利用可能な「Font Awesome」。ちょっとした文章にアイコンを追加するだけで見栄えが全く違います。
普段利用する資料にちょっとしたワンポイントがあるだけでも、書類整理に役立ったりすると思いますので、ぜひ利用して見てはいかがでしょうか?
動画でも紹介してます↓↓↓
>> https://youtu.be/IbWEjGKbQTw
FontAwesomeのまとめ一覧↓↓↓
>> https://fun.wazn.jp/info/969/
この記事へのコメントはありません。