css – 如何将图标放在rails中提交按钮

前端之家收集整理的这篇文章主要介绍了css – 如何将图标放在rails中提交按钮前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
我正在使用Bootstrap,并希望在表单的提交按钮中放置一个图标。
这里是代码
<%= f.submit "Submit for Approval <i class='icon-share-alt icon-white'></i>",class: "button_green" %>

生成的HTML:

<input type="submit" value="Submit for Approval &lt;i class='icon-share-alt icon-white'&gt;&lt;/i&gt;" name="commit" class="button_green">

我尝试向文本添加raw和html_safe,但是似乎都没有起作用。
我知道一个解决方案是让类成为一个图标,其中已经有图标,但我想这样做,而不需要创建额外的图像/ CSS。有什么建议么?

解决方法

您可以通过使用button_tag来执行此操作:
<%= button_tag( :class => "button_green") do %>
  Submit for Approval <i class="icon-share-alt icon-white"></i>
<% end %>

这将创建一个< button type =“submit”>< / button>元素与图标和文字内部。我已经测试了它的工作原理。 button_tag的默认操作是提交,因此,如果您需要一个不同的操作(例如取消例如),可以使用:type => “按钮”选项覆盖默认的提交行为。

编辑:对于Bootstrap 3,图标类名已更改,因此您可以放

<span class="glyphicon-white glyphicon-share-alt white"></span>

请注意,白色图标不再有特殊的类。只是做一个css类。白和放颜色:#fff ;.简单。您可以使用任何您喜欢的颜色或文字风格,因为图标现在是一种字体。

相关问题:Add Icon to Submit Button in Twitter Bootstrap 2How do I change Bootstrap 3’s glyphicons to white?

猜你在找的CSS相关文章