Rails
FontAwesome

RailsでsubmitボタンにFontAwesomeを使いたい

More than 1 year has passed since last update.

みなさまこんにちは。営業からエンジニアになって早5ヶ月。アイドルが大好きなnori_saiです。

Livesenseアドベントカレンダーその2の最終日を担当いたします。よろしくお願いいたします。

何を書くか迷いましたが、ちょうど今RailsINSPINIAというadminツールを使って開発をしているので

そこでの出来事を書きたいと思います。


INSPINIAってなに

ご存知ですか? INSPINIA

インスピニアって読みます。2000円くらいで多機能で色んな画面用のテンプレが揃ってる優秀なやつです。

僕は今、とある営業支援ツールを作っていまして、INSPINIAを導入し開発しています。

なんでこれ使っているかと言うと


  • 営業上がりの初心者エンジニア2人がメイン担当で、デザインとか何もわからない…笑

  • から、何かに頼りたい


  • Bootstrap・FontAwesomeとかあらかじめ入っているから、細かい設定とか不要

  • デザイン面とかもすでに出来上がっているし、かっこいい


  • 社内で導入実績あるから、いざという時頼れる(頼りたいばっか)

こんな感じで初心者エンジニアの僕にもスピーディーに社内ツールが開発できるって感じの条件が揃っていました∩(゚∀゚∩)

思った通りで、INSPINIAの便利さもあり順調に開発していったわけですが…

せっかくFontAwesomeを気軽に使える環境にあるというのに

f.submit でFontawesomeが表示されないという問題にぶつかりました。

そこでの解決方法が、本題になります。(前置き長い)


f.submit でFontawesomeのアイコンが表示できない

submitボタンに虫眼鏡とかのアイコンつけてイケてる感じにしたかったのです。(文字だけだと微妙ですし)

が、Fontawesomeのコードをclassに書いてもアイコンが出てこない!

なんでやねんって調べたら

最初に書いてたこのコードには適応できないみたいです。


index.html.slim

= f.submit class: 'btn btn-primary' do

i.fa-lg.fa-fw.fa-search
|検索

どうしたらええねんって調べたら


index.html.slim

= button_tag type: 'submit', class: 'btn btn-primary' do

i.fa-lg.fa-fw.fa-search
|検索

みたいな感じで

f.submitではなく

button_tagtype: 'submit'でやればええねんで。ってことでした。

link_toでも同じ書き方でいけました。

無事にアイコンついて良い感じになった〜!とおもったら

f.submitで使えてたjQueryが使えなくなってしまいました…

頑張って直そう…(記事は以上です)


メリークリスマス

  / ̄ ̄ヽ

  ○(二二二)
   (´・ω・) ))
 (( ( つ ヽ  ♪
♪  >とノ )))
   (_ノ(_)