Como adicionar um ícone SVG em uma entrada?
Preciso colocar ícones nas entradas para criar um novo usuário. Provavelmente é uma tarefa muito fácil para alguém que conhece o caminho do código de front-end. No entanto eu não. Aqui está o wireframe e depois mostro meu código.
WIREFRAMEComo você pode ver. Existem ícones no lado esquerdo das entradas. No momento, tenho os SVGs no meu diretório e pronto para usar, só preciso saber como colocá-los na entrada. Aqui está o código para o formulário
FORMATO<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>
Então, eu tenho o espaço reservado com uma string que atualmente apenas imprime essa string. Eu preciso colocar os ícones dentro do que eu acho? Aqui está o CSS que tenho para os ícones.
CSS.icon-email {
background-image: image-url('email-field.svg');
}
.icon-name {
background-image: image-url('name-field.svg');
}
Existe uma maneira de colocar essas classes no espaço reservado?