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按鈕樣式。

來源

2011-09-08 blawzoo

嗨@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。

來源

2011-09-08 20:02:14 jdc

Rails 3.1按鈕帶有css的圖標

回答

相關問題