sposób umieszczania przycisku przesyłania ikon w szynach

Question

Używam Bootstrap i chcę umieścić ikonę w przycisku przesyłania formularza.
oto kod:

<%= f.submit "Submit for Approval <i class='icon-share-alt icon-white'></i>", 
           class: "button_green" %> 

Generated HTML:

<input type="submit" value="Submit for Approval &lt;i class='icon-share-alt icon-white'&gt;&lt;/i&gt;" name="commit" class="button_green"> 

Próbowałem dodawanie zarówno surowe i html_safe do tekstu, ale nie wydawał się do pracy.
Wiem, że jednym z rozwiązań byłoby, aby klasa była obrazem z ikoną, ale chciałbym to zrobić bez tworzenia dodatkowych obrazów/css. jakieś sugestie?

Answer 1

Można to zrobić za pomocą button_tag zamiast:

<%= button_tag(:class => "button_green") do %> 
    Submit for Approval <i class="icon-share-alt icon-white"></i> 
<% end %> 

To stworzy <button type="submit"></button> element z ikoną i wordage wewnątrz. Testowałem i to działa. Domyślną operacją dla button_tag jest przesłanie, więc jeśli potrzebujesz innej akcji (np. Anuluj na przykład), możesz użyć opcji :type => "button", aby zastąpić domyślne zachowanie przesyłania.

Edit: Dla Bootstrap 3, nazwy klasy ikona uległy zmianie, więc można umieścić

<span class="glyphicon-white glyphicon-share-alt white"></span> 

wypowiedzenia, nie ma już specjalna klasa dla białych ikon. Po prostu utwórz klasę css .white i wstaw color: #fff;. Prosty. Możesz użyć dowolnego koloru lub stylu tekstu, ponieważ ikony są teraz czcionką.

Powiązane Pytanie: Add Icon to Submit Button in Twitter Bootstrap 2 i How do I change Bootstrap 3's glyphicons to white?

Answer 2

.button_green { 
    background-image:url(...your image path...); 
    background-repeat:no-repeat; 
    padding-left:30px; 
} 

Może być konieczne dopasowanie dopełnienia do rozmiaru ikony.