Html 如何在输入中添加 SVG 图标？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/40808493/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to add a SVG icon within an input?
提问by Bitwise
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
如你看到的。输入的左侧有图标。现在我的目录中有 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>
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。
CSS
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?
有没有办法将这些类放在占位符中？
回答by Stickers
You can add a pseudo element in the <label>tag, and use some positionand paddingtricks for the visual. Using a svg for background is just the same as using an image.
您可以在<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>回答by Ricky
You can create an SVG spritesheet for svg icons.
您可以为 svg 图标创建一个 SVG spritesheet。
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>回答by TPLMedia24
Here is an example using fontawesomeicon set within the placeholder attribute.
这是使用在 placeholder 属性中设置的fontawesome图标的示例 。
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=''></textarea>
<br>
<input type='text' placeholder=''/>回答by Aaron St. Clair
Possible duplicate of: https://stackoverflow.com/a/917636/2329657
可能重复：https: //stackoverflow.com/a/917636/2329657
Now, to address your question. I see a few issues with your setup.
现在，回答你的问题。我发现您的设置存在一些问题。
- 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. - Your CSS is looking for
class="icon-email"andclass="icon-name"attributes within your HTML, however I see no such attributes. Again, this may be something the framework handles and is defined elsewhere.
- 您为此使用什么框架？我无法具体确定，因为
<%= %>语法相当普遍。通常输入元素是使用<input>标签创建的。了解框架将有助于识别其实现输入元素的方式可能存在的任何奇怪之处。 - 您的 CSS 正在您的 HTML 中查找
class="icon-email"和class="icon-name"属性，但是我看不到这样的属性。同样，这可能是框架处理并在别处定义的东西。
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.
我相信您正在尝试以错误的方式执行此操作，<label>而是使用 a而不是直接在输入本身上使用 CSS 处理此问题。如果您可以提供上述信息，那么我将能够提供更合适的解决方案。
