如何在输入中添加 SVG 图标？

Posted 2023-03-15

【中文标题】如何在输入中添加 SVG 图标？

【英文标题】：How to add a SVG icon within an input?

【发布时间】：2017-04-10 01:28:42

【问题描述】：

我需要在输入中放置图标以创建新用户。对于熟悉前端代码的人来说，这可能是一项非常容易的任务。然而我没有。这是线框图，然后我展示我的代码。

线框

如您所见。输入的左侧有图标。现在我的目录中有 SVG 并准备好了，我只需要知道如何将它们放在输入中。这是表单的代码

表格

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

有没有办法可以将这些类放在占位符中？

【问题讨论】：

如果你把它放在占位符中，当用户开始输入时，图标会消失。查看您的 css，您可能希望将其添加到每个输入的类中？例如

你的 css 看起来也有问题。应该是 background-image: url('email-field.svg'); ? （网址不是图片网址）

【参考方案1】：

您可以在<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>

【讨论】：

如何在上面添加我自己的 SVG 图标？

@MasumOsmanKhan 您可以直接链接到 svg 或使用数据 uri yoksel.github.io/url-encoder

【参考方案2】：

您可以为 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>

【参考方案3】：

可能重复：https://***.com/a/917636/2329657

现在，解决您的问题。我发现您的设置存在一些问题。

您为此使用什么框架？我无法具体识别，因为<%= %> 语法相当普遍。通常输入元素是使用<input> 标签创建的。了解该框架将有助于识别其实现输入元素的方式可能存在的任何异常情况。 您的 CSS 正在您的 html 中寻找 class="icon-email" 和 class="icon-name" 属性，但是我没有看到这样的属性。同样，这可能是框架处理并在其他地方定义的东西。

我相信您尝试以错误的方式执行此操作，使用 <label> 而不是直接在输入本身上使用 CSS 处理此问题。如果您能提供以上信息，我就能提供更合适的解决方案。

【讨论】：

我正在使用 Rails

我将承认我对@Pangloss 解决方案的回答。他的解决方案可以添加到label 或input 本身，两者都应该按预期工作。

【参考方案4】：

这是一个在占位符属性中使用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='&#xf075;'></textarea>
<br>
<input type='text' placeholder='&#xf02b;'/>