Add icon to input submit button

Question

The goal is to display an icon and text inside of a submit button.

Here's what I tried at first; and failed.

<%= f.submit "Post", class: "new_post_submit" do %>

  <i class="glyphicon glyphicon-pencil"></i>

<% end %>

After some time tinkering, I ended up with this. Still, it doesn't work so I think it's time to ask the community. This doesn't cause any errors, but instead of saying "(icon) Post", the button displays the default text: "Create post"

<%= f.submit class: "new_post_submit" do %>

  <span><i class="glyphicon glyphicon-pencil"></i> Post</span>

<% end %>

Answer 1

Try this

<%= button_tag(type: "submit", class: "new_post_submit") do %>
  <span><i class="glyphicon glyphicon-pencil"></i> Post</span>
<% end %>

This generates html similar to

<button type="submit" class="new_post_submit">
  <span><i class="glyphicon glyphicon-plus"></i> Post</span>
</button>

Let me know if this works.

Add icon to input submit button

Sign up