Blog

RailsでFont Awesomeを使用する

2016.04.26Cat:Rails 開発

Webにてアイコンをフォントで設置する場合、Font Awesomeが使用されますが、Ruby on Railsにて導入する場合を記事にしてみました。
Rails以外でFont Awesomeを設置する場合は、こちらの記事が参考になります。
ちょっとしたアイコンにいい「FontAwesome」

Gemfile

Gemfileにfont-awesome-railsを追加し、bundle installを実行する。

application.css

app/assets/stylesheets/application.cssに上記を追加する。

準備は以上で完了です。

使用するときは、htmlタグにて

設置したり、cssのclassにて

と設置します。

アイコンを使用したい場所に上記を設置後、
rake assets:precompile
を実行すれば、

public/assets/FontAwesome-bcf2323752da19b8cc2695e88722807a803c0a2a9f20d8a7d7cb55846b55b3fa.otf
public/assets/fontawesome-webfont-23f40876f4009dc2b74ad97674c979cd435ff888990d14900f38a1cb36f10bdf.eot
public/assets/fontawesome-webfont-b0387cc7b1ca00f2f04bde2cd508be6e1a17caf0ee713a19627c1f02c638e280.svg
public/assets/fontawesome-webfont-b0387cc7b1ca00f2f04bde2cd508be6e1a17caf0ee713a19627c1f02c638e280.svg.gz
public/assets/fontawesome-webfont-3e8c3cc94dc6261132948b99958b852ff8504c64686bedd6b1505563ed72e4d8.ttf
public/assets/fontawesome-webfont-a4d2c0c031f66c57ec2815079e49e41cad9dc58f0986ba072fb88fff888dca0e.woff
public/assets/fontawesome-webfont-d3ebb498192527b985939ae62cc4e5eb5c108efc1896184126b45d866868e73d.woff2

とFontAwesomeが自動的に読み込まれます。
とても便利です。

注意

Rails以外のアプリケーションで使用する場合、fontディレクトリを作成し、そこにfont-awesome.min.cssを設置しますが、そのやり方でもできるようです。
ただし、共存しているとうまく読み込まれないこともあるようです。

Author Profile

mizutani
» 投稿一覧
  • Launch Cart次世代ECサイト構築システム 初期月額無料
  • LaunchMovie ECに特化した動画制作サービス

Archive

ページTOPへ