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

 

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

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

Rails5にAwesomeを導入する

まずはGemfileにgemを書いてあげる。

Gemfile

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倍の大きさになる。  

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

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

<style type="text/css">
	
	.fa-yellow:before
	{
		color: #F7FE2E ;
	}

</style>
<%= fa_icon 'star' %>
<%= fa_icon 'star 5x', class: "fa-yellow"%>

 

これで黄色になります。

 

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

以上!

コメントを残す

メールアドレスが公開されることはありません。