在浏览电商网站时，常能看到商品图片支持放大查看细节。用放大镜和缩小图标替代文字提示，能显著提升用户体验。这类图标可通过CSS直接实现，无需额外图片资源。文末提供了完整的图标代码，方便直接复制使用，快速集成到项目中，简洁高效地完成交互效果。
1、 启动HTML开发工具，新建一个HTML代码文件。在文件中插入一个div标签，并为其设置class属性值为magnifier。接着，在该div标签内部添加一个i标签，用于后续样式或功能的实现，结构如示意图所示。
2、 生成代码：创建一个包含放大镜图标的容器元素，结构为带类名的div包裹i标签。
3、 在标签下方添加
4、 代码：
5、 }
6、 通过CSS伪类after为magnifier类设置斜杠样式，实现一条斜线效果，具体所示。
7、 CSS样式代码重写
8、 }
9、 将HTML代码保存为文件，用浏览器打开，查看页面是否显示为一个搜索按钮的小图标，效果所示。
10、 在搜索图标内创建一个缩小的图标，并通过CSS为标签设置样式，添加一条垂直居中的细直线，实现所示效果。
11、 CSS样式代码
12、 }
13、 重新保存HTML页面后，用浏览器打开即可查看缩小的图标效果，所示。
14、 通过CSS伪类after在小图标的缩小样式内添加一条竖线，实现放大效果的视觉变化，使小圆圈中多出一竖线，从而区分放大与缩小状态。
15、 CSS样式代码重写
16、 }
17、 保存网页代码后，用浏览器打开，即可看到放大图标按钮，所示。
18、 复制全部代码到新建的HTML文件中，保存后直接打开即可查看完整页面效果。
19、 因此代码：
20、 放大镜：细节尽收眼底，清晰可见。
21、 }
22、 }
23、 }
24、 }
