Impresionante fuente, tipo de entrada 'enviar'


205

Parece que no hay clase para el tipo de entrada 'submit' en font-awesome. ¿Es posible usar alguna clase de font-awesome para ingresar botones? He agregado íconos a todos los botones (que en realidad se vinculan con la clase 'btn' de twitter-bootstrap) en mis aplicaciones, pero no puedo agregar íconos en 'input type submit'.

O, cómo usar este código:

input#image-button{
    background: #ccc url('icon.png') no-repeat top left;
    padding-left: 16px;
    height: 16px;
}

html:

<input type="submit" id="image-button">Text</input>

(que tomé de HTML: ¿Cómo hacer un botón de envío con texto + imagen? ) con font-awesome?

Respuestas:


345

use button type = "submit" en lugar de input

<button type="submit" class="btn btn-success">
    <i class="fa fa-arrow-circle-right fa-lg"></i> Next
</button>

para el uso de Font Awesome 3.2.0

<button type="submit" class="btn btn-success">
    <i class="icon-circle-arrow-right icon-large"></i> Next
</button>

¡Increíble! Funciona como se esperaba. Todavía necesita algunos pasos para adaptar esto para simple_form o crear un ayudante, pero es relativamente fácil.
denis.peplin

19
También tenga en cuenta las diferencias entre <button type=submit>y <input type=submit>: stackoverflow.com/questions/3543615/…
Pavlo

@ stanislav-mayorov sí funciona. Si está utilizando la versión actual 4.7, debe ajustar desde 3.2.0 (desde 2012). Prueba la respuesta actualizada.
Joao Leme

@JoaoLeme ¿ <button type="submit">funciona de alguna forma?
Ryuujo

Esto no funciona cuando quiero evitar volver a cargar la página.
Salvioner

87

HTML

Como el <input>elemento muestra solo el valor del atributo de valor, solo tenemos que manipularlo:

<input type="submit" class="btn fa-input" value="&#xf043; Input">

Estoy usando &#xf043; entidad aquí, que corresponde al U + F043, el símbolo 'tinte' de Font Awesome.

CSS

Luego tenemos que darle estilo para usar la fuente:

.fa-input {
  font-family: FontAwesome, 'Helvetica Neue', Helvetica, Arial, sans-serif;
}

Lo que nos dará el símbolo de tinte en Font Awesome y el otro texto en la fuente apropiada.

Sin embargo, este control no será perfecto para píxeles, por lo que puede que tenga que ajustarlo usted mismo.


1
Gracias por la respuesta, funciona, pero en realidad no puedo usar este enfoque, porque la fuente afecta el texto de todo el valor. También uso 'icon-large' en otros botones ... Para aquellos que prueben esto, los códigos de fuente están aquí: github.com/FortAwesome/Font-Awesome/blob/master/sass/…
denis.peplin

Creo que eso es todo lo que podemos hacer aquí. Personalmente, le sugiero que deje <input>un icono.
Pavlo

funcionó bien, tengo que usar <input type = "submit"> porque tengo dos
envíos

esto es mejor que agregar "fa" a la clase de elemento, ya que "fa" cambiará la altura del elemento.
Siwei Shen 申思维

También puede usar la font-familypropiedad de estilo en línea para usarla en cualquier elemento HTML que tenga contenido de texto.
SaidbakR

54

Puede usar la fuente impresionante cheatheet utf

<input type="submit" class="btn btn-success" value="&#xf011; Login"/>

Aquí está el enlace para la hoja de trucos http://fortawesome.github.io/Font-Awesome/cheatsheet/


2
¡Esto hizo mi dia! Gracias. Para cualquier otro usuario, tenga en cuenta la frase: copie y pegue los iconos ( no el Unicode ) directamente desde esta página en su diseño, es decir, copie el icono real y funcionará
PSR

17
<input type="button" class="fa" value="&#xf011; Login"/>sin bootstrap usa la clase fa para que funcione
StackHola

2
Si está intentando configurar esto con javascript o jQuery, use la variación Unicode:$("input.search").addClass("fa").val("\uf011 Login");
Jamie Chong

2
Incluso con Bootstrap necesito agregar class = "fa" para que esto funcione.
denis.peplin

12

Bueno, técnicamente no es posible obtener :beforey los :afterpseudo elementos funcionaninput elementos

De W3C :

12.1 Los pseudoelementos antes y después:

Los autores especifican el estilo y la ubicación del contenido generado con los pseudoelementos antes y después. Como indican sus nombres, los pseudoelementos: before y: after especifican la ubicación del contenido antes y después del contenido del árbol de documentos de un elemento. La propiedad 'contenido', junto con estos pseudo-elementos, especifica lo que se inserta.


Así que tuve un proyecto en el que tenía botones de envío en forma de inputetiquetas y, por alguna razón, los otros desarrolladores me restringieron a usar <button>etiquetas en lugar de los botones de envío de entrada habituales, así que se me ocurrió otra solución, envolver los botones dentro de un spanconjunto a position: relative;y luego posicionar absolutamente el icono utilizando :afterseudo.

Nota: El violín de demostración utiliza el código de contenido para FontAwesome 3.2.1, por lo que es posible que deba cambiar el valor de la contentpropiedad en consecuencia.

HTML

<span><input type="submit" value="Send" class="btn btn-default" /></span>

CSS

input[type="submit"] {
    margin: 10px;
    padding-right: 30px;
}

span {
    position: relative;
}

span:after {
    font-family: FontAwesome;
    content: "\f004"; /* Value may need to be changed in newer version of font awesome*/
    font-size: 13px;
    position: absolute;
    right: 20px;
    top: 1px;
    pointer-events: none;
}

Demo

Ahora aquí todo se explica por sí mismo, sobre una propiedad pointer-events: none;, es decir , la he usado porque al pasar el cursor sobre el :aftercontenido pseudogenerado, su botón no hará clic, por lo que usar el valor denone forzará la acción de clic para pasar a través de ese contenido .

Desde la red de desarrolladores de Mozilla :

Además de indicar que el elemento no es el objetivo de los eventos del mouse, el valor none indica al evento del mouse que "atraviese" el elemento y apunte a lo que esté "debajo" de ese elemento.

Pase el mouse sobre la fuente / ícono del corazón Demoy vea qué sucede si NO usapointer-events: none;


1
Si bien es una solución muy interesante, tiene un gran inconveniente: eventos de puntero: ninguno no es compatible con IE <11 ( caniuse.com/#feat=pointer-events ). La razón es que la propiedad de eventos de puntero se hizo para elementos SVG (gráficos vectoriales) y técnicamente no está en las especificaciones W3C para otros elementos HTML (aún, wiki.csswg.org/spec/css4-ui#pointer-events ) aunque Todos los navegadores modernos, excepto IE <11, lo admiten.
CaspianRoach

9

Puede usar clases de botón btn-linky btn-xscon tipo submit, lo que hará un pequeño botón invisible con un icono dentro de él. Ejemplo:

<button class="btn btn-link btn-xs" type="submit" name="action" value="delete">
    <i class="fa fa-times text-danger"></i>
</button>

5

También posible así

<button type="submit" class="icon-search icon-large"></button>

1

Con envíos múltiples, cuando necesita el valor del envío seleccionado, esto se puede hacer con bastante facilidad. Simplemente cree un campo oculto en su formulario y cambie su valor según el botón en el que se haga clic. Por ejemplo, en el formulario, digamos que tiene:

<input type="hidden" id="Clicked" name="Clicked" value="" />
<button type="submit" class="btn btn-success ClickCheck" id="Create"> <i class="fa fa-file-pdf-o"> Create Bill</i></button>
<button type="submit" class="btn btn-success ClickCheck" id="Reset"> <i class="fa fa-times"> Reset</i></button>
<button type="submit" class="btn btn-success ClickCheck" id="StoreData"> <i class="fa fa-archive"> Save</i></button>

Usando jQuery:

<script type="text/javascript">
    $(document).ready(function()
    {
        $('.ClickCheck').click(function()
        {
            var ButtonID = $(this).attr('id');
            $('#Clicked').val(ButtonID);
        });
    });
</script>

Luego puede recuperar el valor del botón en el que se hizo clic en la variable de publicación "Clicked"

Al usar nuestro sitio, usted reconoce que ha leído y comprende nuestra Política de Cookies y Política de Privacidad.
Licensed under cc by-sa 3.0 with attribution required.