- 更新日: 2014年4月13日
- Rails
Rails で form_for の submit ボタンに glyphicon を使う
スポンサーリンク
Twitter Bootstrap 3 では、ビルトインで glyphicon という便利なアイコン素材を使うことができる。使い方は、以下のように CSS の class で指定します。
|
1 2 3 |
<button type="button" class="btn btn-default btn-lg"> <span class="glyphicon glyphicon-star"></span> Star </button> |
【お知らせ】 英単語を画像イメージで楽に暗記できる辞書サイトを作りました。英語学習中の方は、ぜひご利用ください！
画像付き英語辞書 Imagict | 英単語をイメージで暗記スポンサーリンク
— 環境 —
Rails 4.0.1
詳しくは以下。
それで、この glyphicons のアイコンを、Rails ヘルパー form_for の submit ボタンで使おうとしたのですけど、やり方が分からなかったので Stack Overflow で調べました。
通常 form_for の中では、以下のように submit ボタンを作成する。
|
1 |
<%= f.submit "送信", class: "btn btn-default btn-sm" %> |
f.submit だと上手いこと glyphicon のアイコンを埋め込むことができません。
そこで、glyphicon を使う場合は、submit ボタンを button タグで作るようにします。
|
1 2 3 |
<%= button_tag( class: "btn btn-default btn-sm") do %> <%= content_tag :span, "送信", class: "glyphicon glyphicon-star" %> <% end %> |
出力される HTML。
|
1 2 3 |
<button class="btn btn-default btn-sm"> <span class="glyphicon glyphicon-star">送信</span> </button> |
これで上手いこと glyphicon を sbumit ボタンに埋め込むことができます。なお form_tag などでも同様にする。
- – 参考リンク –
- Add icon to submit button in twitter bootstrap 2 – Stack Overflow
- Rails form の submit ボタンにbootstrapのglyphiconをつける – tkymtk’s blog
- html – Bootstrap change the color of glyphicons to blue but not at all palces – Stack Overflow
スポンサーリンク
パーフェクト Ruby on Rails は、最近読んだ Rails 本の中では一番役に立った本です。Chef や Capistrano など Rails と共によく使用される技術にも触れてあります。Ruby on Rails 4 アプリケーションプログラミングは、入門的な内容で Rails の機能全体を網羅されています。
<< 前の記事 : Rails.cache.fetch でオブジェクトをキャッシュ
- Rails の関連記事
- RailsでMySQLパーティショニングのマイグレーション
- Rails ActiveRecordでdatetime型カラムのGROUP BY集計にタイムゾーンを考慮する
- RailsプラグインGemの作成方法、RSpecテストまで含めたrails pluginの作り方
- RailsでAMPに対応するgemをリリースしました
- Railsでrequest.urlとrequest.original_urlの違い
- Railsでwheneverによるcronバッチ処理
- Google AnalyticsのRails Turbolinks対応
- Railsアプリにソーシャル・シェアボタンを簡単設置
- Rails監視ツール用にErrbitをHerokuで運用
- Facebook APIバージョンのアップグレード手順(Rails OmniAuth)
Leave Your Message!