Rails 3.1按钮带有css的图标

问题描述：

如何将图标添加到带有CSS的rails按钮？Rails 3.1按钮带有css的图标

我的要求是既为<％button_to％>和<％f.submit％>

感谢您的帮助

你好@jdc我终于找到了窍门，我做不要用你的方法，但它是helpul找到我way.Thanks很多man.So THI是我如何着手：

1°）更改html.erb代码：

<%= f.submit %>

到

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

2°）在应用程序/资产/样式表，并把以下的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 */

}在

当然#button中CSS代码的顶部是：<%= f.submit , :id => 'button' do -%> co。中的id名称de在html.erb文件

我希望这将帮助你们在rails 3应用程序上设计css按钮样式。

嗨@blawzoo，你的问题是不相关的轨道，但是是通用的HTML/CSS。所以如果你想谷歌''按钮与图标css'你会发现很多很好的解释。希望这可以帮助。 – nathanvda

答

如果我理解你的要求，你可以尝试这样的事：

<% 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。

Rails 3.1按钮带有css的图标

相关推荐