miyazaki-dev

Rails5でfont-awesomeが一瞬で使えるようになった

Ruby On Rails

RailsでAwesome使いたいなーと思ってやってみたら一瞬で終わった。

Rails5にfontawesomeを導入する方法

それでは手順を書いていく。

Rails5にAwesomeを導入するまずはGemfileにgemを書いてあげる。

gem 'font-awesome-rails'

gemをインストールさせる。

コマンドライン

bundle install

cssに読み込ませる。

app/assets/stylesheet/application.css

*= require font-awesome

使えるようにするためにはこれだけ。

続いて使い方。

Rails5でAwesomeの使い方

html.erbのところで以下のように書くだけ。

<%= fa_icon 'star' %>

本来HTMLで書く場合には、『fa-star』と記述する必要があるが、starのみとなる。

これじゃ小さいという場合には、

<%= fa_icon 'star 5x' %>

とすることで、以下のように5倍の大きさになる。

aaa

色を変えたいなあと思ったらclassを指定することもできるので、色を変えてみる。

aaa

今回は、スターなので黄色に。

<style type="text/css">
  .fa-yellow:before{
    color: #F7FE2E ;
  }
</style>
<%= fa_icon 'star' %>
<%= fa_icon 'star 5x', class: "fa-yellow"%>

これで黄色になります。

他にもぐるぐる回したり、テキストを横に追加したり、awesomeで提供されているものも使えました。

以上!