如何在输入框左侧使用单独SCSS文件中导入的放大镜图标？

嘿，我来帮你搞定这个问题！你已经通过icons.scss里的@font-face定义了自定义字体图标库，要在搜索输入框左侧添加放大镜图标其实很简单，分几步来操作：

1. 找到放大镜图标对应的类名和Unicode值 #

首先打开你的icons.scss文件，找到放大镜图标的样式定义——这类自定义字体图标通常会给每个图标分配一个类，并用伪元素（比如:before）设置对应的Unicode内容，大概长这样：

.icon-search:before {
  content: "\e602"; /* 这里的Unicode是示例，你要找自己文件里的对应值 */
  font-family: "app"; /* 这个名称必须和@font-face里的font-family完全一致 */
}

如果你的文件里没有直接写类名，那也会有每个图标对应的Unicode映射，你需要把放大镜对应的那个字符记下来。

2. 搭建搜索框的HTML结构 #

推荐用一个容器包裹图标和输入框，这样更方便定位布局，结构如下：

<div class="search-wrapper">
  <i class="icon-search"></i>
  <input type="text" class="search-input" placeholder="请输入搜索内容">
</div>

如果你不想额外加<i>标签，也可以尝试用输入框的父容器伪元素，但要注意：原生input是替换元素，部分浏览器不支持给它加伪元素，所以容器+图标标签的方法兼容性更好。

3. 编写CSS定位样式 #

接下来通过CSS把图标固定在输入框左侧，同时给输入框留出左侧padding避免文字盖住图标：

.search-wrapper {
  position: relative;
  display: inline-block; /* 或者根据你的布局需求用block */
}

.icon-search {
  position: absolute;
  left: 12px; /* 调整图标和输入框左侧的距离 */
  top: 50%;
  transform: translateY(-50%); /* 垂直居中图标 */
  color: #999; /* 设置图标颜色，和你的设计匹配 */
  font-size: 16px; /* 调整图标大小 */
  /* 这里不用重复写font-family，因为icons.scss里的.icon-search已经定义了 */
}

.search-input {
  padding-left: 40px; /* 给图标留出足够空间，数值要比图标宽度+left值大一点 */
  height: 42px;
  border: 1px solid #eee;
  border-radius: 21px; /* 可选，做圆角输入框 */
  font-size: 14px;
  /* 其他你需要的输入框样式 */
}

4. 确保icons.scss正确引入 #

最后别忘了在你的主样式文件（比如main.scss或者全局样式）里导入icons.scss，这样图标字体才能生效：

@import "./path/to/icons.scss"; /* 路径要根据你的文件结构调整 */

小提醒 #

• 一定要保证font-family的名称和@font-face里的完全一致（你的文件里是"app"），否则图标会显示不出来
• 如果图标显示成乱码，检查字体文件的路径是否正确，icons.scss里的url("../fonts/app.eot")这类路径要和实际字体文件位置匹配

内容的提问来源于stack exchange，提问作者Ksjones