Cómo agregar un SVG icono dentro de una entrada?

Necesito colocar los iconos dentro de las entradas para la creación de un nuevo usuario. Probablemente es realmente una tarea fácil para alguien que conoce su camino alrededor de la parte frontal código final. Sin embargo, yo no. Aquí es el de la estructura metálica y, a continuación, muestro mi código.

De la estructura metálica

Cómo agregar un SVG icono dentro de una entrada?

Como se puede ver. Hay iconos en la parte izquierda de las entradas. Ahora mismo tengo el SVG en mi directorio y listo para ir solo necesito saber como colocarlos dentro de la entrada. Aquí está el código para el formulario

FORMA

<label clas="name-label">
  <%= f.text_field :name, placeholder: "Name", class: "form-labels" %>
</label>

<label class="email-label">
  <%= f.text_field :email, placeholder: "Email", class: "form-labels" %>
</label> 

Así que tengo el marcador de posición con una cadena que, actualmente, sólo la impresión de que la cadena. Necesito poner los iconos dentro de los que pienso? Aquí es el css que tengo para los iconos.

CSS

.icon-email {
  background-image: image-url('email-field.svg');
}

.icon-name {
 background-image: image-url('name-field.svg');
}

Es hay alguna manera de colocar estas clases en el lugar de titular?

  • Si la pones en el marcador, cuando el usuario comienza a escribir el icono desaparecerá. Busca en tu css, es probable que desee agregar a la clase de cada entrada? eg <%= f.text_field :nombre marcador de posición: «Nombre», de la clase: «la forma-las etiquetas de los iconos de correo electrónico» %>
  • tu css también se ve mal. Debe ser background-image: url(‘correo electrónico de campo.svg’); ? (url de la imagen-url)
InformationsquelleAutor Bitwise | 2016-11-25

4 Kommentare

  1. 22

    Puede agregar un pseudo elemento en el <label> etiqueta, y el uso de algunas position y padding trucos para la visual. El uso de un svg para el fondo es lo mismo que el uso de una imagen.

    CSS:

    label {
      position: relative;
    }
    
    label:before {
      content: "";
      position: absolute;
      left: 10px;
      top: 0;
      bottom: 0;
      width: 20px;
      background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='25' height='25' viewBox='0 0 25 25' fill-rule='evenodd'%3E%3Cpath d='M16.036 18.455l2.404-2.405 5.586 5.587-2.404 2.404zM8.5 2C12.1 2 15 4.9 15 8.5S12.1 15 8.5 15 2 12.1 2 8.5 4.9 2 8.5 2zm0-2C3.8 0 0 3.8 0 8.5S3.8 17 8.5 17 17 13.2 17 8.5 13.2 0 8.5 0zM15 16a1 1 0 1 1 2 0 1 1 0 1 1-2 0'%3E%3C/path%3E%3C/svg%3E") center / contain no-repeat;
    }
    
    input {
      padding: 10px 30px;
    }

    HTML:

    <label>
      <input type="text" placeholder="Search">
    </label>

  2. 9

    Puede crear un SVG spritesheet svg iconos.

    CSS:

    label {
      position: relative;
    }
    
    label > .icon {
      position: absolute;
      top: 50%;
      left: 10px;
      transform: translateY(-50%);
      color: silver;
    }
    
    label > input {
      padding-left: calc(1em + 10px + 8px); /* icon width + icon padding-left + desired separation*/
      height: 2em;
    }
    
    /*
      SVG SpriteSheet
    */
    
    .spritesheet {
      display: none;
    }
    
    .icon {
      display: inline-block;
      width: 1em;
      height: 1em;
      stroke-width: 0;
      stroke: currentColor;
      fill: currentColor;
    }

    HTML:

    <label clas="name-label">
      <svg class="icon icon-user">
        <use xlink:href="#icon-user"></use>
      </svg>
      <input type="text" placeholder="Name">
    </label>
    
    
    <label clas="name-label">
      <svg class="icon icon-envelop">
        <use xlink:href="#icon-envelop"></use>
      </svg>
      <input type="text" placeholder="Email">
    </label>
    
    
    
    <svg class="spritesheet">
      <symbol id="icon-user" viewBox="0 0 32 32">
        <title>user</title>
        <path d="M18 22.082v-1.649c2.203-1.241 4-4.337 4-7.432 0-4.971 0-9-6-9s-6 4.029-6 9c0 3.096 1.797 6.191 4 7.432v1.649c-6.784 0.555-12 3.888-12 7.918h28c0-4.030-5.216-7.364-12-7.918z"></path>
      </symbol>
      <symbol id="icon-envelop" viewBox="0 0 32 32">
        <title>envelop</title>
        <path d="M29 4h-26c-1.65 0-3 1.35-3 3v20c0 1.65 1.35 3 3 3h26c1.65 0 3-1.35 3-3v-20c0-1.65-1.35-3-3-3zM12.461 17.199l-8.461 6.59v-15.676l8.461 9.086zM5.512 8h20.976l-10.488 7.875-10.488-7.875zM12.79 17.553l3.21 3.447 3.21-3.447 6.58 8.447h-19.579l6.58-8.447zM19.539 17.199l8.461-9.086v15.676l-8.461-6.59z"></path>
      </symbol>
    </svg>

  3. 0

    Posible duplicado de: https://stackoverflow.com/a/917636/2329657

    Ahora, a la dirección de su pregunta. Veo un par de problemas con la instalación.

    1. Qué marco se están utilizando para esto? No puedo identificar específicamente, como la <%= %> sintaxis es bastante universal. Normalmente los elementos de entrada se crean utilizando <input> etiquetas. Conocer el marco ayudará a identificar cualquier error que pueda existir con cómo se implementa elementos de entrada.
    2. Tu CSS está buscando class="icon-email" y class="icon-name" atributos dentro de tu HTML, sin embargo veo que no hay tales atributos. De nuevo, esto puede ser algo que el framework maneja y se define en otro lugar.

    Creo que está tratando de hacer esto de la manera equivocada, el uso de un <label> en lugar de la manipulación de este con CSS directamente en la entrada de la misma. Si usted puede proporcionar la información de arriba, a continuación, voy a ser capaz de proporcionar una solución más adecuada.

    • Estoy usando Rails
    • Voy a ceder mi respuesta a @Pangloss solución. Su solución podría ser añadido a la label o la input sí mismo, y ambos deben funcionar como se esperaba.
  4. 0

    Aquí es un ejemplo del uso de fontawesome conjunto de iconos en el atributo placeholder.

    CSS:

    textarea,
    input {
      padding: 10px;
      font-family: FontAwesome, "Open Sans", Verdana, sans-serif;
      font-style: normal;
      font-weight: normal;
      text-decoration: inherit;
      text-align: center;
    }

    HTML:

    <link href="//netdna.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css" rel="stylesheet">
    <textarea placeholder='&#xf075;'></textarea>
    <br>
    <input type='text' placeholder='&#xf02b;'/>

Kommentieren Sie den Artikel

Bitte geben Sie Ihren Kommentar ein!
Bitte geben Sie hier Ihren Namen ein

Pruebas en línea