2012-08-02 7 views
17

में फ़ॉन्ट भयानक प्रतीक एम्बेड करने के लिए उपयोगकर्ता फॉन्ट को मेरे बटन के लिए भयानक प्रतीक कोशिश कर रहा है लेकिन मैं इसे submit_tagकैसे submit_tag

<%= submit_tag icon("search"), class: "btn-primary", style:"width:40px;" %> 

उत्पादन में दिखाने के लिए प्राप्त नहीं कर सकते:

<input class="btn-primary" name="commit" style="width:40px;" type="submit" value="&lt;i class='icon-search' style='font-size:1em' &gt;&lt;/i&gt;"> 

सहायक:

def icon(name, size=1) 
    #icon("camera-retro") 
    #<i class="icon-camera-retro"></i> 

    html = "<i class='icon-#{name}' " 
    html += "style='font-size:#{size}em' " 
    html += "></i>" 
    html.html_safe 
end 

जब मैं सहायक की html.html_safe लाइन को हटाता हूं तो मुझे वही चीज़ मिलती है। इसकी तरह html_safe काम नहीं कर रहा है। मैंने एचटीएमएल = कच्चे (एचटीएमएल) को भी कोई प्रभाव नहीं दिया है।

+0

आप फ़ॉन्ट बहुत बढ़िया प्रतीक इनपुट के रूप में सब पर काम करने के लिए मिल सकता है मान? – dylanjha

+0

यदि आप सबमिट करें बटन को बदलते हैं तो आप यह कर सकते हैं। [यह SO] देखें (http://stackoverflow.com/questions/11686007/font-awesome-input-type- सबमिट करें)। – Chiperific

उत्तर

19

इनपुट टैग नहीं है नेस्टेड एचटीएमएल की अनुमति दें, जिसे आपको आइकन दिखाने की ज़रूरत है।

बजाय एक बटन का उपयोग कर प्रयास करें:

<button class='btn btn-primary' style='width:40px;'> 
    <%= icon("search") %> 
</button> 

यह बटन टैग और इनपुट के व्यवहार के बीच कुछ अंतर ध्यान देने योग्य है टैग सबमिट करें। महान विवरणों के समूह के लिए this SO question देखें। मुझे व्यक्तिगत रूप से मेरे अनुप्रयोगों में बटन टैग का उपयोग करने में कोई समस्या नहीं है। हालांकि, विभिन्न ब्राउज़रों और इस तरह के संबंध में वाईएमएमवी।

1

मुझे लगता है कि आप सहायक से html_safe से छुटकारा पाने की आवश्यकता होगी, और सिर्फ icon("search")

के बजाय raw icon("search") का उपयोग करें और के रूप में BaronVonBraun कहते हैं - का उपयोग प्रस्तुत button बल्कि input[submit] से

2

आप इस तरह, अपने एचटीएमएल कोड को प्रतीक जोड़ सकते हैं:

<i class="icon-search"></i> 

हालांकि, अगर आप रेल LINK_TO सहायक में जगह माउस ilink_to सहायक विधि का उपयोग करना चाहते हैं।

1) अपनी संपत्ति समूह के लिए मणि जोड़े Gemfile में: मणि 'कम-रेल-fontawesome'

2) भागो बंडल स्थापित: नीचे दिए गए चरणों का पालन करें

3) बनें सुनिश्चित करें कि @import 'fontawesome'; ऐप/संपत्ति/स्टाइलशीट/bootstrap_and_overrides.css.less में असम्बद्ध है।

4) * link_to * सहायक विधि के बजाय * ilink_to * सहायक विधि का उपयोग करें।

<%= ilink_to "upload-alt", "Edit", edit_post_path(post), class: 'btn btn-mini' %> 

Obs: पूर्व में होना आइकन नाम के साथ लिंक पाठ बंद आइकन उपसर्ग छीन

ये निर्देश यहां हैं: https://github.com/wbzyl/less-rails-fontawesome

4
<%= link_to(status, :method=>:delete) do %> 
    <i class='icon-trash icon-large'></i> 
<% end %> 
संबंधित मुद्दे