0

Soy estudiante y sucede lo siguiente, quiero colocar una etiqueta <span></span> dentro de la propiedad value de un input type="submit"

El principal problema es que al tratar de colocar o imprimir la etiqueta span dentro del atributo value"Texto", se muestra la clase de manera escrita dentro del botón, y no el icono que deseo colocar.

Esto lo quiero hacer dado que quiero insertar un icono mediante una etiqueta <span> dentro del atributo de Value

<span class="icon-database"></span><input type="submit" value="Guardar">

Entonces, deseo que la clase icon-database se agregue de alguna manera dentro de value="Guardar" para que se agregue el icono a mi botón.

Tratar de hacer esto pero de manera correcta y que lo interprete el navegador:

<input type="submit" value="<span class="icon-database"></span>Guardar">

Para darme a entender mejor dejo una imagen

introducir la descripción de la imagen aquí

El icono que se encuentra a la izquierda quiero colocarlo dentro del botón, justo al lado del texto Guardar

Se que es una pregunta tonta para muchos pero yo me estoy iniciando en esto y no se la manera de realizarlo todavía.

3 respuestas 3

2

Para el input puede emplear los caracteres especificados para añadir indirectamente el icono al value del input , además se puede hacer uso de otras clases para dar un mejor diseño es obligatorio el uso de fa class

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.2.0/css/bootstrap.min.css">
<link rel="stylesheet"  href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.2.0/css/font-awesome.min.css">

<input type="submit" class="fa  btn btn-primary" value="&#xf1c0; Guardar"/>

<input type="submit" class="fa  btn btn-success" value="&#xf0d6; Cobrar"/>

6
  • Entiendo, estaba tratando en lo posible de utilizar Bootstrap porque es algo que no lo requiere, pero creo que me veré forzado a utilizarlo
    – diego_vzla
    Commented el 26 jun. 2017 a las 6:00
  • @diego_vzla no es obligatorio emplear bootstrap , solo lo añadí para agregar estilos adicionales , solo con font-awesome debería funcionar
    – Dev. Joel
    Commented el 26 jun. 2017 a las 6:02
  • Perfectoo, muchas gracias. Los post se colocan como solucionados aquí? o quedan abiertos?
    – diego_vzla
    Commented el 26 jun. 2017 a las 6:04
  • @diego_vzla se debe marcar como aceptada la respuesta que soluciono su problema.
    – Dev. Joel
    Commented el 26 jun. 2017 a las 6:05
  • Listo, muchas gracias por tu ayuda.
    – diego_vzla
    Commented el 26 jun. 2017 a las 6:07
0
   <button type="submit"  ><i class="icon-database" ></i>Guardar</button>

intenta con esto y me dices que tal

3
  • Así también funciona pero no existe una manera para realizarlo con la etiqueta Input type="submit" en vez de un button?
    – diego_vzla
    Commented el 26 jun. 2017 a las 5:41
  • 1
    <?php $icono="<span class='icon-database'></span>" ?> <input type="submit" value="<?php echo $icono ?> Guardar"> Me refiero a algo como eso
    – diego_vzla
    Commented el 26 jun. 2017 a las 5:48
  • si vas a usar ese boton fuera de un form te recomiendo usar input type ='submit', de lo contrario utiliza button aca puedes ver con mas detalle las diferencias w3.org/TR/html401/interact/forms.html#idx-control-7 Commented el 26 jun. 2017 a las 5:49
0

Puedes asignar una imagen de fondo directamente sobre la etiqueta input con la propiedad background-image

Este ejemplo funciona para mi:

<html>
<head>
    <title>ej</title>
    <style type="text/css">
        input[type='submit'] {
            padding: 5px;
            width: 100px;
            text-align: right;
        }
        .icon-database {
            background-image: url('https://path/to/your/img.png');
            background-size: auto 20px;
            background-repeat: no-repeat;
        }
    </style>
</head>
<body>
    <input class='icon-database' type="submit" value="Guardar">
</body>
</html>

introducir la descripción de la imagen aquí

Simple:

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.