怎么在input里加图标

在`<input>`标签中添加图标，可以使用CSS的伪类`::before`或`::after`来实现。以下是一个示例代码：

HTML代码：

<div class="input-with-icon">
  <input type="text" placeholder="请输入内容">
</div>

CSS代码：

.input-with-icon input[type="text"] {
  padding-left: 30px; /* 设置左边距，留出位置放置图标 */
}

.input-with-icon::before {
  content: "\f007"; /* 设置图标内容 */
  font-family: "FontAwesome"; /* 设置字体 */
  position: absolute;
  left: 10px;
  top: 50%;
  transform: translateY(-50%);
}

以上代码中使用了Font Awesome字体库来引用图标，需要在HTML中引入相关的CSS和字体文件。

相关问题

在el-input里加图标

在el-input中加入图标可以通过suffix-icon和prefix-icon属性或者slot来实现。suffix-icon和prefix-icon属性可以在input组件的首部和尾部增加显示图标，例如suffix-icon="el-icon-date"对应日期图标，prefix-icon="el-icon-search"对应搜索图标。而通过slot可以自定义图标的位置和样式，例如在搜索框头部加入图标可以使用以下代码：

<el-input v-model="queryParams.detailQuery" placeholder="可查询SAP物料号/产品名称" clearable size="small" class="search-input1" @keyup.enter.native="handleQuery" suffix-icon="el-icon-search">
  <i slot="prefix" class="el-input__icon el-icon-search"></i>
</el-input>

其中，i标签的class属性为"el-input__icon el-icon-search"，可以根据需要更改。同时，也可以通过CSS样式来调整图标的位置和样式。

H5 input里加小图标

在H5 input中加入小图标，可以通过在input标签中添加type="text"和class属性，然后在class中设置背景图片的方式来实现。例如：

<input type="text" class="search-input" placeholder="请输入搜索内容">

.search-input {
    background-image: url(搜索.png);
    background-repeat: no-repeat;
    background-position: right center;
    padding-right: 20px;
}

这样就可以在输入框的右侧添加一个搜索图标了。