it-roy-ru.com

Как добавить значок SVG во вход?

Мне нужно разместить значки во входах для создания нового пользователя. Вероятно, это действительно простая задача для тех, кто знает, как разбираться во внешнем коде. Однако я не. Вот каркас, а затем я показываю свой код.

WIREFRAME

 enter image description here

Как вы видете. На левой стороне входов есть значки. Прямо сейчас у меня есть SVG в моем каталоге и я готов к работе, мне просто нужно знать, как разместить их во входных данных. Вот код для формы

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> 

Итак, у меня есть заполнитель со строкой, которая в данный момент просто печатает эту строку. Мне нужно положить значки в том, что я думаю? Вот CSS, который я имею для значков.

CSS

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

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

Могу ли я разместить эти классы внутри заполнителя?

10
Bitwise

Вы можете добавить псевдоэлемент в тег <label> и использовать некоторые трюки position и padding для визуального отображения. Использование SVG для фона точно так же, как использование изображения.

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

Вы можете создать SVG spritesheet для иконок 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

Возможная копия: https://stackoverflow.com/a/917636/2329657

Теперь, чтобы ответить на ваш вопрос. Я вижу несколько проблем с вашей настройкой.

  1. Какие рамки вы используете для этого? Я не могу определить конкретно, так как синтаксис <%= %> довольно универсален. Обычно элементы ввода создаются с использованием тегов <input>. Знание структуры поможет выявить любые странности, которые могут существовать с тем, как она реализует элементы ввода.
  2. Ваш CSS ищет атрибуты class="icon-email" и class="icon-name" в вашем HTML, однако я не вижу таких атрибутов. Опять же, это может быть чем-то, что обрабатывает фреймворк и определяется в другом месте.

Я полагаю, что вы пытаетесь сделать это неправильно, используя <label> вместо того, чтобы обрабатывать это с помощью CSS непосредственно на самом входе. Если вы сможете предоставить вышеуказанную информацию, я смогу предложить более подходящее решение.

0
Aaron St. Clair

Вот пример использования fontawesome icon, установленного в атрибуте 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