4
5

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 5 years have passed since last update.

FontAwesomeについて

Last updated at Posted at 2016-05-23

今まで名前は知っていたけど、触ってこなかったFontAwesonmeを実際に触ってみたら相当便利だったので、メモ。

FontAwesomeとは?

  • サイトでよく使われるアイコンをWebフォントとして利用出来るようにした物。

メリット

  • フォントなので
    • 拡大縮小簡単
    • 色も変えられる
  • Retina対応
  • 回転もOK
  • 重ねあわせもOK
  • 使うのが簡単(classを振るだけ)
  • ローディングなどの動きも簡単に出せる
  • 商用利用OK

CSSでサイズや色を変更できるので複数のアイコンを用意する必要もなくて便利ですね。

デメリット

  • 複数の色を指定することは出来ない
  • ほかのサイトと被る可能性あり

まぁ、挙げればこんな感じ。別にデメリットでもないかも?

使えるアイコン集

よく使うであろうアイコンはこんな感じ

  • 矢印アイコン(Directional Icons)
  • SNSアイコン(Brand Icons)
  • ローディングアイコン(Spinner Icons)
  • その他ファイルタイプなどたくさん

デザイン時の使い方(Macの場合)

Macでの使用方法を。

  • FontAwesonmeをダウンロードし、解凍したファイルの中から FontAwesome.otf をインストール
  • FontAwesome のチートシートから使いたいアイコンを選択しコピー
  • Photoshopにテキストツールでコピペ。コピペした段階では文字化けしているので慌てないでOK
  • フォント文字化けしているフォントを選択して、フォントの種類を「Font Awesome」に変更

参考:
アイコンフォントをphotoshopやillustratorで簡単に使う方法。特に、FontAwesomeはチートシートが用意されていてカナリ便利。

どうして今まで使ってこなかったんだという便利さ。
今後は積極的に使っていきたい。

4
5
1

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
4
5

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?