How to add a SVG icon within an input?

Question

I need to place icons within the inputs for creating a new user. It's probably a really easy task for someone who knows their way around front end code. However I don't. Here is the wireframe and then I show my code.

WIREFRAME

As you can see. There are icons on the left side of the inputs. Right now I have the SVG's in my directory and ready to go I just need to know how to place them within the input. Here is the code for the form

FORM

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

So I have the placeholder with a string which currently just printing that string. I need to put the icons within that I think? Here is the css I have for the icons.

CSS

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

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

Is there a way I can place these classes within the place holder?

Transect

If you put it in the placeholder, when the user starts typing the icon will disappear. Looking at your css, you probably want to add it to the class of each input? eg <%= f.text_field :name, placeholder: "Name", class: "form-labels icon-email" %> – Harrington

your css also looks wrong. Should be background-image: url('email-field.svg'); ? (url not image-url) – Harrington

Answer 1

You can add a pseudo element in the <label> tag, and use some position and padding tricks for the visual. Using a svg for background is just the same as using an 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>

Neither

how can i add my own SVG icon on that? – Fizzle

@MasumOsmanKhan You can either link to the svg directly or use data uri yoksel.github.io/url-encoder – Neither

Answer 2

You can create an SVG spritesheet for svg icons.

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>

Apoloniaapolune

Answer 3

Here is an example using fontawesome icon set within the placeholder attribute.

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;'/>

Rambunctious

Answer 4

You can position a background image in a input, and have that image be an svg. Here is an example (I used the stack overflow logo instead since it is likely to remain up for as long as this is up):

    .search-input {
      width: 100%;
      height: 48px;
      padding: 12px 8px 12px 36px;
      border-radius: 4px;
      border: 1px solid gray;
      /* replace this svg with the one you like */
      background-image: url('https://stackoverflow.design/assets/img/logos/so/logo-stackoverflow.svg');
      background-repeat: no-repeat;
      /* update the position so it shows */
      background-position: -33px -30px;
    }

        <input
          type="search"
          class="search-input"
          placeholder="Find a product or service"
        />

Spickandspan

Answer 5

I am assuming you want to create a search bar like the above "stack overflow"s one You can create that by

form {
  display: flex;
  align-items: center;
}

svg {
  width,
  height: 48px;
}

.search {
  width: 600px;
  change the width based on your needs height: 50px;
}

.btn {
  border: none;
}

<form>
  <input type="text" placeholder="Search.." class="search" />
  <div>
    <button type="submit" class="btn">**svg path here**</button>
  </div>
</form>

You can remove the background-color also if you want.

Kimmi

Answer 6

Possible duplicate of: https://mcmap.net/q/86953/-put-icon-inside-input-element-in-a-form

Now, to address your question. I see a few issues with your setup.

1. What framework are you using for this? I cannot identify specifically, as the <%= %> syntax is fairly universal. Normally input elements are created using <input> tags. Knowing the framework will help identify any oddities that may exist with how it implements input elements.
2. Your CSS is looking for class="icon-email" and class="icon-name" attributes within your HTML, however I see no such attributes. Again, this may be something the framework handles and is defined elsewhere.

I believe you're trying to do this the wrong way, using a <label> instead of handling this with CSS directly on the input itself. If you can provide the above information then I'll be able to provide a more appropriate solution.

Barye

I'm using Rails – Transect

I will concede my answer to @Pangloss solution. His solution could be added to either the label or the input itself, and both should work as expected. – Barye