Wie füge ich ein SVG-Symbol in einer Eingabe hinzu?

Question 1

Ich muss Symbole in den Eingaben platzieren, um einen neuen Benutzer zu erstellen. Es ist wahrscheinlich eine wirklich einfache Aufgabe für jemanden, der sich mit Front-End-Code auskennt. Ich jedoch nicht. Hier ist das Wireframe und dann zeige ich meinen Code.

DRAHTRAHMEN

Wie du sehen kannst. Auf der linken Seite der Eingänge befinden sich Symbole. Im Moment habe ich die SVGs in meinem Verzeichnis und kann loslegen. Ich muss nur wissen, wie ich sie in der Eingabe platzieren kann. Hier ist der Code für das Formular

BILDEN

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

Ich habe also den Platzhalter mit einer Zeichenfolge, die derzeit nur diese Zeichenfolge druckt. Ich muss die Symbole einfügen, die ich denke? Hier ist das CSS, das ich für die Symbole habe.

CSS

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

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

Gibt es eine Möglichkeit, diese Klassen innerhalb des Platzhalters zu platzieren?

Question 2

Sie können ein Pseudo-Element in hinzufügen <label> Tag, und verwenden Sie einige position und padding Tricks für das Visuelle. Die Verwendung eines SVG als Hintergrund ist genauso wie die Verwendung eines Bildes.

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>

Question 3

Sie können ein SVG-Spritesheet für SVG-Symbole erstellen.

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>

Question 4

Mögliches Duplikat von: https://stackoverflow.com/a/917636/2329657

Nun zu Ihrer Frage. Ich sehe ein paar Probleme mit Ihrem Setup.

Welchen Rahmen verwendest du dafür? Ich kann nicht konkret identifizieren, wie die <%= %> Syntax ist ziemlich universell. Normalerweise werden Eingabeelemente mit erstellt <input> Stichworte. Wenn Sie das Framework kennen, können Sie eventuelle Besonderheiten bei der Implementierung von Eingabeelementen erkennen.

Ihr CSS sucht class="icon-email" und class="icon-name" Attribute in Ihrem HTML, aber ich sehe keine solchen Attribute. Auch dies kann etwas sein, das das Framework handhabt und an anderer Stelle definiert wird.

Ich glaube, Sie versuchen, dies auf die falsche Weise zu tun, indem Sie a verwenden <label> anstatt dies mit CSS direkt auf der Eingabe selbst zu behandeln. Wenn Sie die oben genannten Informationen bereitstellen können, kann ich Ihnen eine geeignetere Lösung anbieten.

Question 5

Hier ist ein Beispiel mit Fontawesome Symbolsatz innerhalb des Platzhalterattributs.

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="https://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;"/>