How to embed font-awesome icons into submit_tag

Question

Trying to user font awesome icons for my buttons but I cant get it to show in the submit_tag

 <%= submit_tag icon("search"), class: "btn-primary", style:"width:40px;" %>

output:

 <input class="btn-primary" name="commit" style="width:40px;" type="submit" value="&lt;i class='icon-search' style='font-size:1em' &gt;&lt;/i&gt;">

helper:

def icon(name, size=1)
  #icon("camera-retro")
  #<i class="icon-camera-retro"></i> 

  html = "<i class='icon-#{name}' "
  html += "style='font-size:#{size}em' "
  html += "></i>"
  html.html_safe
end

when I remove the html.html_safe line of the helper I get the same thing. its like html_safe is not working. I have also tried html = raw(html) with no effect either.

Heeheebiejeebies

Can you get Font Awesome icons to work at all as input values? – S

You can do this if you change the submit to a button. See this SO. – Weakly

Answer 1

Input submit tags don't allow nested HTML, which you need to show an icon.

Try using a button instead:

<button class='btn btn-primary' style='width:40px;'>
  <%= icon("search") %>
</button>

It's worth noting some differences between the behaviour of button tags and input submit tags. Check out this SO question for a bunch of great details. I personally haven't had issues using button tags in my applications. YMMV with respect to different browsers and such, though.

Pears

Answer 2

<%= link_to(status, :method=>:delete) do %>
   <i class='icon-trash icon-large'></i>
<% end %>

Policlinic

Answer 3

You can add icons to your HTML code, like this:

<i class="icon-search"></i>

However, if you want place icons in Rails link_to helper use the ilink_to helper method. Follow the steps below:

1) Add the gem to your assets group in the Gemfile: gem 'less-rails-fontawesome'

2) Run bundle install:

3) Be sure that @import 'fontawesome'; is uncommented in app/assets/stylesheetes/bootstrap_and_overrides.css.less.

4) Use *ilink_to* helper method instead of *link_to* helper method.

<%= ilink_to "upload-alt", "Edit", edit_post_path(post), class: 'btn btn-mini' %>

Obs: Precede the link text with the icon name stripped off icon- prefix

These instructions are here: https://github.com/wbzyl/less-rails-fontawesome

Houseboat

Answer 4

I think you'll need to get rid of html_safe from the helper, and use raw icon("search") instead of just icon("search")

and as BaronVonBraun says - use button rather than input[submit]

Nedranedrah