15
11

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.

Livesenseその2Advent Calendar 2016

Day 25

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

Posted at

みなさまこんにちは。営業からエンジニアになって早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が使えなくなってしまいました…

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

メリークリスマス

  / ̄ ̄ヽ
  ○(二二二)
   (´・ω・) ))
 (( ( つ ヽ  ♪
♪  >とノ )))
   (_ノ(_)
15
11
0

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
15
11

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?