副業で月収5万円を稼ぐミマのブログ

ゼロから初めて月収5万円を実現するための実況ブログ

【番外編】MarsEditでアイコンフォント「Font Awesome」を表示させる方法(Macのみ)

マックのブログ編集ソフト「MarsEdit」はとても便利で愛用中。

 

 

でも「MarsEdit」の「New Post」の編集画面ではアイコンフォントがアイコンとして表示されないので、なんとかならないか…と調べてみました。
いくつかの解説を参考に挑戦してみたらうまくいったのでその時の手順を紹介します。

ざっくりした手順は

(1)Font Awesomeのサイトからデータ一式をダウンロードする

(2)Macにフォントとしてインストールする

(3)Font Awesomeのサイトに戻り、チートシートから使いたいアイコンフォントをコピーする

(4)「Mars Edit」の編集画面に戻り、ペーストする

これで編集画面上にアイコンが表示されました!

もう少し詳しく説明しますね。

MarsEditでアイコンフォント「Font Awesome」を表示させる方法

(1)Font Awesomeのサイトからデータ一式をダウンロードする

サイトのトップページにダウンロードボタンがあります。
サイトはコチラ→http://fontawesome.io

f:id:m_mima:20170321232356p:plain

サイトのダウンロードボタンをクリックするとサブウインドウが出てきます。
有料版へのボタンが大きく表示されていますが、その下のボタン「No thanks, just download Font Awesome」と書いてある方をクリックすると無料のデータをダウンロードすることができます。 

f:id:m_mima:20170322000435j:plain

 

(2)Macにフォントとしてインストールする

Macに付属の「Font Book」を立ち上げて、ファイルメニューから「新しいライブラリ」を作成します。
すると左側の一覧に新しいライブラリがつくられるので名称を入力。

次に、新しくつくったライブラリを選択したままで、ファイルメニューから「フォントを追加…」を選び、先ほどダウンロードしたFont Awesomeのフォルダから「fonts」フォルダ>「FontAwsome.otf」を選びフォントを追加します。

 

 

(3)Font Awesomeのサイトに戻り、チートシートから使いたいアイコンフォントをコピーする

 Font Awesomのチートシートから使いたいアイコンフォントを選び、そのアイコン部分をコピーします。

Font Awesomのチートシートはこちら→http://fontawesome.io/cheatsheet/

f:id:m_mima:20170321232345j:plain

 

(4)「Mars Edit」の編集画面に戻り、ペーストする

編集画面にもどってアイコンを表示させたいところにペーストします。

以上です。
これでMarsEditで編集しながらアイコンフォントが使えるようになりました。
Wordpressならそのままアップロードしてもアイコン表示してくれます。
他のブログサービスの場合は、Font Awesome CDNが使われているかを確認してくださいね。 
CDNの取得はこちら→http://fontawesome.io/get-started/