Rails and bootstrap - Add HTML tags to a submit button text

user_1146764 0
Viewed 36443

I have a form for a like/unlike button using ajax :

= form_for like, :html => { :method => :delete}, :remote => true do |f|
= f.submit pluralize(@video.likes.count, 'like'), :class => "btn btn-warning btn-mini", "data-disable-with"=> "Just a moment..."

The form works perfectly.

I would like to add an icon in front of the text in the submit button. The haml code for adding the icon is the following (twitter bootstrap) :

%i.icon-heart.icon-white

Is there a way to add this html to the button? I tried adding it as plain html, but rails rendered it as text.

UPDATE

I have manage to encapsulate the submit button in a span class which contains the icon and the appropriate styling. I now need to remove every styling on the button...

%span.btn.btn-danger.btn-mini
  %i.icon-heart.icon-white
  = f.submit pluralize(@video.likes.count, 'like')
twitter-bootstrap ruby-on-rails
7 Answers

The accepted answer for the question itself will work but is more like a patch instead of the perfect solution keeping code style clear and consistent. It backtracks into using the standard and manual view method: #button_tag. I tend to avoid those manual methods like #submit_tag, #form_tag, #input_tag ... etc because they are unrelated to the backed model or form-model itself and you need to manually do everything on them. Even though the submit has no connection with the f. that every input in a form_for has like for e.g. f.input ..., it's about style, code readability and good programming practices. This code works perfectly fine (form_for and simple_form):

= f.button :button, type: :submit, class: 'class1 class2 ... classN' do
    = 'button call to action text'
    %i.fa.fa-download.ml5 // => haml icon as requested

Hope it helps others reaching this post like me trying to avoid _tag methods.

user_16081880
Related