web-dev-qa-db-fra.com

Comment ajouter une icône SVG dans une entrée?

Je dois placer des icônes dans les entrées pour créer un nouvel utilisateur. C'est probablement une tâche très facile pour quelqu'un qui connaît bien le code frontal. Cependant je ne. Voici le fil de fer et ensuite je montre mon code.

Fil de fer

 enter image description here

Comme vous pouvez le voir. Il y a des icônes à gauche des entrées. À l'heure actuelle, j'ai les fichiers SVG dans mon répertoire et prêts à l'emploi, je dois juste savoir comment les placer dans l'entrée. Voici le code pour le formulaire

FORME

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

J'ai donc l'espace réservé avec une chaîne qui ne fait qu'imprimer cette chaîne. J'ai besoin de mettre les icônes à l'intérieur que je pense? Voici le css que j'ai pour les icônes.

CSS

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

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

Est-il possible de placer ces classes dans l'espace réservé?

htmlcsssvg
10
Bitwise

Vous pouvez ajouter un pseudo-élément dans la balise <label> et utiliser certaines astuces position et padding pour le visuel. Utiliser un svg comme arrière-plan revient à utiliser une image.

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;
}
<label>
  <input type="text" placeholder="Search">
</label>

17
Stickers

Vous pouvez créer une feuille de calcul SVG pour les icônes svg.

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

5
Ricky

Double possible de: https://stackoverflow.com/a/917636/2329657

Maintenant, pour répondre à votre question. Je vois quelques problèmes avec votre configuration.

  1. Quel cadre utilisez-vous pour cela? Je ne peux pas identifier spécifiquement, car la syntaxe <%= %> est assez universelle. Normalement, les éléments d’entrée sont créés à l’aide des balises <input>. Connaître le cadre aidera à identifier les anomalies pouvant exister quant à la manière dont il implémente les éléments d’entrée.
  2. Votre CSS recherche les attributs class="icon-email" et class="icon-name" dans votre code HTML, mais je ne vois pas de tels attributs. Encore une fois, cela peut être quelque chose que le cadre gère et est défini ailleurs.

Je crois que vous essayez de le faire de la mauvaise façon, en utilisant un <label> au lieu de gérer cela directement avec CSS sur l'entrée elle-même. Si vous pouvez fournir les informations ci-dessus, je serai en mesure de fournir une solution plus appropriée.

0
Aaron St. Clair

Voici un exemple utilisant fontawesome icon set dans l'attribut placeholder.

textarea,
input {
  padding: 10px;
  font-family: FontAwesome, "Open Sans", Verdana, sans-serif;
  font-style: normal;
  font-weight: normal;
  text-decoration: inherit;
  text-align: center;
}
<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;'/>

0
TPLMedia24