ご注文はFont Awesomeですか？ 第1羽「ひと目で尋常でないスライドだと見抜いたよ」


[CSS Advent Calender 2014](http://qiita.com/advent-calendar/2014/css) 2日目です．2日連続になりますが，ご容赦ください（カレンダーすかすかなので誰か…）．


昨日の記事（[Font Awesomeでモテカワスリムで恋愛体質の愛されWebサイト♪ を目指す](http://qiita.com/izumin5210/items/94e3d92df6480ca343dc)）では，ただのアイコンフォントじゃない[**Font Awesome**](fontawesome.io)の，あまり知られていない使い方（公式に書いてますが…）についてご紹介いたしました．

今日はちょっと趣向を変えて，Webの外でFont Awesomeを活用する方法を紹介します．


# スライドでFont Awesomeを使う

勉強会，LTなどでよく使う自己紹介スライド，これじゃ寂しいですよね．

![自己紹介スライド](https://qiita-image-store.s3.amazonaws.com/0/14845/f7737b2b-07a1-9b39-81c8-e1e29460c91b.png "自己紹介スライド")

たとえばアカウント名を`@izumin5210`だけじゃなくてアイコン（<i class="fa fa-twitter-square"></i>，<i class="fa fa-facebook-square"></i>，<i class="fa fa-github-square"></i>，etc.）も見せたらもっと可愛くなるのではないか，そんな時に[**Font Awesome**](fontawesome.io)が活躍します．

# 手順

次の3ステップで簡単に使えます！

1. Font Awesomeを普通のフォントとしてインストール
2. 使いたいフォントをコピペしてくる
3. スライドに貼り付け

以下，詳しく説明．

## Font Awesomeを普通のフォントとしてインストール

[公式サイトTop](http://fontawesome.io/)にある <i class="fa fa-download"></i> Download よりzipファイルを取ってきて解凍し，`fonts`ディレクトリの**FontAwesome.otf**をインストール．

Macユーザかつ[**Homebrew**](http://brew.sh/)，[**Homebrew Cask**](http://caskroom.io/)ユーザの場合は，[**Caskroom-fonts**](https://github.com/caskroom/homebrew-fonts)を利用することでコマンドラインからインストール可．

```console
$ brew tap caskroom/homebrew-fonts
$ brew cask install font-fontawesome
```

### 注意点

Font Awesomeをシステムにインストールした場合，**WebフォントとしてFont Awesomeが読めてなくてもアイコンが表示される**ので，Web開発時は要注意！

## 使いたいフォントをクリップボードに貼り付け（コピーしてくる）

[Icons](http://fontawesome.io/icons/)ページからコピーしようにもうまく出来ない…

そんなときには，[**Font Awesome Cheatsheet**](http://fontawesome.io/cheatsheet/)という超便利なページがあります．
ここから使いたいアイコンを探してコピーしてきます．

例として`fa-github-square`（<i class="fa fa-github-square"></i>）を利用したい場合は…

探して，
![使いたいアイコンを探す](https://qiita-image-store.s3.amazonaws.com/0/14845/db8f1bf4-025c-c9e7-a37f-a1566665eba3.png "使いたいアイコンを探す")

選択してコピー！
![アイコンをコピー](https://qiita-image-store.s3.amazonaws.com/0/14845/edb524a0-9dc3-7f70-e97b-c1741214c92b.png "アイコンをコピー")

## スライドに貼り付け

あとは普通に貼り付ける…のですが，こんな感じにつらい文字が表示されます．

![つらそうな文字](https://qiita-image-store.s3.amazonaws.com/0/14845/1bb15371-ca4a-a332-ccd0-b85551d7d747.png "つらそうな文字")

この文字を選択してフォントをFont Awesomeに変更すると…

![Octocatかわいい！](https://qiita-image-store.s3.amazonaws.com/0/14845/26efc17f-f292-b4a4-35cc-cbd7271d195e.png "Octocatかわいい！")

完璧！


## できたやつ

結構よくなったでしょ？

![自己紹介スライド例](https://qiita-image-store.s3.amazonaws.com/0/14845/4d3f813f-7236-7e3e-8bce-2a591334dd7e.png "自己紹介スライド例")

## その他利用例

これも自己紹介スライド（[情報科学若手の会](http://wakate.org/)での発表資料より）．
![自己紹介ページ](https://qiita-image-store.s3.amazonaws.com/0/14845/b4565777-86e6-7a44-0560-4bf4f2cc0c8e.png "自己紹介ページ")


どっか国内での学会か学校の授業かその辺で使ったやつ（慌てて作ったやつなので…という言い訳とともに）
これは5アイコン全部がFont Awesome．

![スマートフォンの機能](https://qiita-image-store.s3.amazonaws.com/0/14845/74f9ee36-4511-d41a-ffd9-fd01d6b5c364.png "スマートフォンの機能")

真ん中の人間がFont Awesome．実はヘッダのスマホもFont Awesome．

![バイオメトリクス](https://qiita-image-store.s3.amazonaws.com/0/14845/855a87f3-2940-a023-9738-9c64dbcdfed6.png "バイオメカニクス")





# まとめ

今日はKeynoteでの場合を簡単に紹介しましたが，PowerPoint使えるんじゃないかなと思います．
僕は普段，Adobe Illustratorでスライドを作っておりますが，そっちでは問題なく使えてます．

味気ない文字だけのスライドも，[**Font Awesome**](fontawesome.io)を使えばかなり印象が変わってきます．
特に僕のような絵がかけないタイプのエンジニアにとっては超ありがたいのでは…！
また，[**Azusa**](http://memo.sanographix.net/post/82160791768)のようないい感じのテンプレと組み合わせることで手を抜きながらもハイクオリティなスライドを作成することも可能です．
（今回，例に出していたスライドは[Azusa](http://memo.sanographix.net/post/82160791768)を改変したAkatsukiという自作テンプレを利用しています．Azusaのライセンスが明記されてないので公開はしていませんが…）

みなさんスライド等でも[**Font Awesome**](fontawesome.io)を使ってオシャレスライドプレゼンターを目指しましょう．


[CSS Advent Calendar 2014](http://qiita.com/advent-calendar/2014/css) 3日目は@zakuro9715さんです．
後輩です．超絶クオリティな超優良記事を期待してますね．

# 参考URL

* [**Font Awesome, the iconic font and CSS toolkit**](http://fontawesome.io/)
* [**Font Awesome Cheatsheet**](http://fontawesome.io/cheatsheet/)
* [大体いい感じになるKeynoteテンプレート「Azusa」作った - MEMOGRAPHIX](http://memo.sanographix.net/post/82160791768)