Fuente impresionante, tipo de entrada 'enviar'

Question

Parece que no hay ninguna clase para el tipo de entrada 'enviar' en font-awesome.¿Es posible utilizar alguna clase de font-awesome para la entrada de botones?Agregué í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 'enviar tipo de entrada'.

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 fuente impresionante?

Answer 1

Utilice el botón Tipo="Enviar" en lugar de la entrada

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

para la fuente increíble 3.2.0 Uso

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

Answer 2

HTML

Dado que el elemento <input> muestra solo el valor del atributo de valor, tenemos que manipular solo:

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

Estoy usando la entidad de  aquí, que corresponde a la U + F043, el símbolo 'tinte' del impresionante de la fuente.

CSS

Entonces tenemos que diseñarlo para usar la fuente:

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

que nos dará el símbolo del tinte en fuente impresionante y el otro texto en la fuente correspondiente.

Sin embargo, este control no será pixel-perfecto, por lo que es posible que tenga que modificarlo por sí mismo.

Answer 3

Puede usar la hoja de cheatsheet UTF impresionante de fuente

<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/

Answer 4

Bueno, técnicamente no es posible conseguir :before y :after pseudo elementos trabajan en input elementos

De W3C:

12.1 Pseudoelementos :antes y :después

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

---

Entonces tenía un proyecto en el que tenía botones de envío en forma de input etiquetas y por alguna razón los otros desarrolladores me restringieron el uso <button> etiquetas en lugar de los botones habituales de envío de entrada, así que se me ocurrió otra solución: envolver los botones dentro de un span ajustado a position: relative; y luego posicionando absolutamente el icono usando :after seudo.

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 content propiedad 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;
}

Manifestación

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

De Red de desarrolladores de Mozilla :

Además de indicar que el elemento no es el objetivo de los eventos del mouse, el valor ninguno indica que el evento del mouse vaya a "a través" del elemento y el objetivo que sea "debajo" de ese elemento.

Pase el cursor sobre la fuente/ícono del corazón Manifestación y mira qué pasa si NO lo usas pointer-events: none;

Answer 5

Puedes usar clases de botones. btn-link y btn-xs con tipo submit, que creará un pequeño botón invisible con un icono dentro.Ejemplo:

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

Answer 6

también es posible así

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

Answer 7

Con múltiples presentaciones, cuando necesita el valor del envío seleccionado, esto se puede hacer con bastante facilidad.Simplemente cree un campo oculto en su forma y cambie su valor dependiendo de qué botón 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 haciendo clic en la variable POST "Clicada"