在前端界面设计中，输入框是常见的组件之一。为了提高用户体验，输入框通常会配合图标来进行辅助说明，这些图标需要在不失清晰度的同时具备美观性。本篇文章将介绍如何在输入文本中使用清晰的图标，并附带示例代码。
为什么需要清晰图标
传统的图标通常由位图组成，在缩放时很容易出现模糊或失真等问题。而在高清屏幕越来越普及的今天，这种情况变得更加明显。为了解决这个问题，我们可以使用矢量图形作为图标，这样无论放大还是缩小都能保持清晰度。
另外，为了尽可能减少文件大小和请求次数，我们可以选择使用字体图标或SVG来代替独立的图片文件。
如何使用清晰图标
使用字体图标
字体图标是将多个图标打包成一个字体文件，通过CSS控制字体样式来显示不同的图标。这种方式最大的好处就是能够在各种分辨率下保持清晰度，同时也有着非常小的文件大小。以下是使用FontAwesome字体图标的示例代码：
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.15.3/css/all.css" integrity="sha384-REPLACE-WITH-actual-integrity-hash" crossorigin="anonymous"> <input type="text" placeholder="请输入搜索内容"><i class="fas fa-search"></i>
其中，<link>标签用于引入FontAwesome字体图标库，<input>标签是输入框元素，<i>标签用于显示放大镜图标。这里使用了fas样式类来指定使用FontAwesome Solid图标集合中的图标，具体可参考官方文档。
使用SVG
SVG是可缩放矢量图形的缩写，是一种基于XML的图像格式。SVG图像可以通过CSS控制样式，也可以响应事件等复杂操作。以下是使用SVG图像的示例代码：
<input type="text" placeholder="请输入搜索内容"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M9.5 18c4.7 0 8.5-3.8 8.5-8.5S14.2 1 9.5 1 1 4.8 1 9.5 4.8 18 9.5 18zm5.7-1.6L19 21.3l-.3.3c-.4.4-.9.4-1.3 0l-2.9-2.9c-.4-.4-.4-.9 0-1.3l.3-.3zM9.5 16c-3 0-5.5-2.5-5.5-5.5S6.5 5 9.5 5 15 7.5 15 10.5 12.5 16 9.5 16z"/></svg>
其中，<input>标签和CSS样式与前面的示例相同，<svg>标签是SVG图像元素，<path>标签用于定义图像路径。这里使用了一个放大镜的SVG图像，具体可参考阿里巴巴矢量图标库。
总结
通过使用字体图标或SVG等方式，我们
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/9906
