在rails中嵌入圖標text_field與HAML placholder

我正在使用rails項目，它使用bootstrap，我想將真棒字體中的圖標嵌入到文本字段的佔位符中。代碼如下所示：在rails中嵌入圖標text_field與HAML placholder

#search 
    = form_for :search, url: topic_search_path do |f| 
    = f.text_field :search_query, placeholder: "Search for topics..."

我知道我應該做正常使用類是我要引用的圖標斜體標籤，但我失去了我究竟應該在佔位符中嵌入，更不用說在用HAML編寫的rails form_for塊中。任何幫助是極大的讚賞。

來源

2013-07-27 jaredsmith

您可以使用實體指定的plaeholder老式方式的值的字符，只要你先設置input的風格，這樣的字體是FontAwesome（或者至少是第一個字體中堆棧FontAwsome。

例如，如果你想使用icon-search icon，這是在代碼點F002（代碼點是圖標，網頁上），那麼你要產生這樣的事情（假設你有字體真棒設置爲頁面）：

<style> 
input /* be more selective here if you want */ { 
    font-family: FontAwesome; 
} 
</style> 

<input placeholder="&#xf002; Search for topics...">

要從text_field方法產生這一點，只是通過實體作爲選項散列的placeholder鍵的值的一部分（可能需要在這裏使用.html_safe，我沒有測試過這最後一位）：

= f.text_field :search_query, placeholder: "&#xf002; Search for topics..."

（您仍然需要樣式化input，以便它使用正確的字體，方法同上。）

來源

2013-07-28 02:16:11 matt

你一定需要.html_safe把它展現出來，雖然這只是顯示我在一個正方形搜索欄.. http://imgur.com/9xAnMOb（另一個放大鏡是我的臨時修補程序，將它放在搜索欄旁邊）。 – jaredsmith

@jaredsmith是否在'style'塊的某處設置了'font-family'作爲輸入？顯示的正方形表示瀏覽器正在使用沒有該字符的字體。 – matt

是的，在我做的CSS文件中，沒有它，我的文本顯然看起來不一樣，所以我確定這個樣式也被應用。對於fontawesome，我使用的是font-awesome-rails gem，我不確定這是否有所作爲，但我認爲我應該提到。 – jaredsmith

在rails中嵌入圖標text_field與HAML placholder

回答

相關問題