Rails 3.1 按钮图标与 css答案

【问题标题】：Rails 3.1 button Icon with cssRails 3.1 按钮图标与 css
【发布时间】：2011-09-08 19:58:03
【问题描述】：

如何使用 css 向 rails 按钮添加图标？

我的请求是针对和

感谢您的帮助

你好@jdc，我终于找到了窍门，我没有使用你的方法，但找到我的方法很有帮助。非常感谢，这就是我如何进行的：

1°) 更改 html.erb 代码：

<%= f.submit %>

到

<%= f.submit , :id => 'button' do -%>
<% end %>

2°) 在 app/assets/stylesheets 中并放入以下 css 代码：

#button {
background-image: url(plus_8x8.png);
background-repeat:no-repeat;
display:block;
float:left;
margin:0 7px 0 0;
background-color:#f5f5f5;
border:1px solid #dedede;
border-top:1px solid #eee;
border-left:1px solid #eee;

font-family:"Lucida Grande", Tahoma, Arial, Verdana, sans-serif;
font-size:12px;
line-height:130%;
text-decoration:none;
font-weight:bold;
color:#565656;
cursor:pointer;
padding:5px 10px 6px 7px;;  /* I put this here to move the text away on older IE junk */

}

当然，css代码顶部的#button是html.erb文件中<%= f.submit , :id => 'button' do -%>代码中的:id名称

我希望这将帮助你们在 Rails 3 应用程序上设置 CSS 按钮样式。

【问题讨论】：

嗨@blawzoo，您的问题与rails 无关，而是通用的html/css。因此，如果您在谷歌上搜索button with icon css，您会发现很多很好的解释。希望这会有所帮助。

标签： ruby-on-rails css button icons

【解决方案1】：

如果我明白你的要求，你可以试试这样：

<% f.submit :html => { :class => 'imgbutton' } %>

然后在你的css中：

background: url(someicon.gif);
border: none;  /* If your icon IS the button */
color: transparent;  /* If you don't want the button text to show up */
*padding-left: 9999px;  /* I put this here to move the text away on older IE junk */

对于一些非常古老的浏览器可能无法使用 CSS 来实现。

【讨论】：