twitter bootstrap - ttf - Font-awesome, tipo de entrada ''submit''

font awesome size

Question

Parece que no hay clase para el tipo de entrada ''enviar'' en font-awesome. ¿Es posible usar alguna clase de font-awesome para ingresar un botón? 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 iconos en ''input type submit''.

O bien, 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 en él? ) con font-awesome?

Answer 1

HTML

Como el elemento <input> muestra solo el valor del atributo value, solo debemos manipularlo:

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

Estoy usando  entidad aquí, que corresponde al U + F043, el símbolo ''tint'' de Font Awesome.

CSS

Luego tenemos que darle un 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 es posible que deba ajustarlo usted mismo.

Answer 2

Bueno, técnicamente no es posible obtener :before y :after pseudo elementos funcionen en input elementos de input

De W3C :

12.1 Los pseudo-elementos: antes y después

Los autores especifican el estilo y la ubicación del contenido generado con los pseudo-elementos: before y: after. Como indican sus nombres, los pseudo-elementos: 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 qué se inserta.

Así que tuve un proyecto en el que tenía botones de envío en forma de etiquetas de input y por alguna razón los otros desarrolladores me restringieron para usar etiquetas <button> lugar de los botones de envío de entrada habituales, así que se me ocurrió otra solución, envolver el botones dentro de un span establecido en position: relative; y luego posicionar completamente el icono usando :after pseudo.

Nota: El violín de demostración utiliza el código de contenido de FontAwesome 3.2.1, por lo que es posible que deba cambiar el valor de la propiedad del content 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 aquí, sobre una propiedad, es decir, pointer-events: none; , Lo he usado porque al pasar el ratón por encima de :after contenido pseudogenerado, su botón no hará clic, por lo que al usar el valor de none forzará la acción de clic para pasar a través de ese contenido.

De la 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 "través" del elemento y apunte a lo que está "debajo" de ese elemento.

Pase el icono de fuente / icono de corazón y vea qué sucede si NO utiliza pointer-events: none;

Answer 3

Con múltiples envíos, cuando necesita el valor del envío seleccionado, esto se puede hacer con bastante facilidad. Simplemente crea un campo oculto en tu formulario y cambia su valor dependiendo de en qué botón se haga clic. Por ejemplo, en la forma, di que tienes:

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

A continuación, puede recuperar el valor del botón al que se hizo clic en la variable de publicación "Hace clic"

Answer 4

Puede usar las clases de botones btn-link y btn-xs con type submit , que creará un pequeño botón invisible con un ícono 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>

Answer 5

Puedes usar font awesome utf cheatsheet

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

También es posible así

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

Answer 7

use el botón 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>