2012-08-02 13 views
17

Tratando de la fuente de usuario iconos impresionantes para los botones de mi, pero no puedo conseguir que se muestran en el submit_tagde cómo integrar de iconos de fuente-impresionante en submit_tag

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

de salida:

<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;"> 

ayudante:

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 

cuando elimino la línea html.html_safe del ayudante obtengo lo mismo. es como html_safe no está funcionando. También probé html = raw (html) sin ningún efecto.

+0

se puede obtener de fuentes iconos impresionantes para trabajar en absoluto como entrada ¿valores? – dylanjha

+0

Puede hacer esto si cambia el envío a un botón. Ver [este SO] (http://stackoverflow.com/questions/11686007/font-awesome-input-type-submit). – Chiperific

Respuesta

19

de entrada se someten las etiquetas no Permitir HTML anidado, que necesita para mostrar un icono.

intentar usar un botón en su lugar:

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

Vale la pena señalar algunas diferencias entre el comportamiento de las etiquetas de los botones y de entrada enviar las etiquetas. Consulte this SO question para obtener una gran cantidad de detalles. Personalmente no he tenido problemas al usar etiquetas de botón en mis aplicaciones. YMMV con respecto a diferentes navegadores y tal, sin embargo.

1

creo que necesita para deshacerse de html_safe del ayudante, y el uso de raw icon("search") en lugar de sólo icon("search")

y como dice BaronVonBraun - button utilizan en lugar de input[submit]

2

Puede añadir iconos a su código HTML, como esto:

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

Sin embargo, si desea colocar iconos en ayudante de rieles link_to utilizan el método ilink_to ayudante. Siga los siguientes pasos:

1) Añadir la gema para su grupo de activos en el Gemfile: joya 'menos carriles-fontawesome'

2) Ejecutar bundle install:

3) Ser Asegúrese de que @import 'fontawesome'; está descomentada en app/assets/stylesheetes/bootstrap_and_overrides.css.less.

4) Use el método * ilink_to * helper en lugar del método * link_to * helper.

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

Obs: preceden al texto del enlace con el nombre del icono despojó de prefijo en iconos

Estas instrucciones están aquí: https://github.com/wbzyl/less-rails-fontawesome

4
<%= link_to(status, :method=>:delete) do %> 
    <i class='icon-trash icon-large'></i> 
<% end %> 
Cuestiones relacionadas