矢量图标是什么,网页中怎么选和用
矢量图标是用数学路径描述的图形，放大缩小都不会模糊，还能用 CSS 直接改颜色和大小。网页里最常见的三种用法是内联 SVG、外部 SVG 文件和图标字体（Webfont），选哪种取决于你要不要单独改色、要不要按需加载、以及项目里已经用了什么技术栈。FontAwesome 中文版就是一个基于 CSS 框架的网页字体图标库，官方说明为完全免费，适合想快速接入、不想自己维护 SVG 文件的场景。
矢量图标和位图图标差在哪
位图图标（PNG、JPG）由像素点组成，放大到一定程度会出现锯齿或模糊，同一个图标要适配不同尺寸往往得准备多套文件。矢量图标记录的是路径和坐标，浏览器渲染时按当前尺寸重新计算，所以：
- 缩放不模糊：从 16px 到 200px 都是同一份文件。
- 文件通常更小：简单图形用路径描述比逐像素存储省空间，但复杂插画不一定。
- 可改色：颜色由 CSS 控制，不用为每个颜色重新导出一张图。
- 可访问性可控制：能给图标加标题、隐藏装饰性图标，方便读屏软件。
代价是复杂图形（比如写实插画）用矢量描述会非常庞大，这类内容还是位图更合适。
常见矢量图标格式和适用场景
| 格式 | 本质 | 适合 | 不适合 |
|---|---|---|---|
| 内联 SVG | 直接把 <svg> 写进 HTML |
需要单独改色、做动画、图标数量少 | 同一图标重复出现很多次，代码会冗余 |
| 外部 SVG | 用 <img> 或 <use> 引用 .svg 文件 |
图标多、想走缓存、想按需加载 | 需要改颜色时 <img> 方式改不了内部颜色 |
| 图标字体 / Webfont | 把图标做成字体，用字符或类名调用 | 快速批量使用、统一风格、配合 CSS 框架 | 只想用几个图标却引入整套字体，体积浪费 |
| 雪碧图（SVG Sprite） | 多个图标合成一个文件，用 <use> 取 |
图标集合固定、想减少请求数 | 需要频繁增删图标时维护麻烦 |
FontAwesome 属于图标字体这一类：引入它的 CSS 后，用类名就能显示图标，颜色和大小跟着文字样式走。
网页中引入矢量图标的三种方式
内联 SVG
把 SVG 代码直接粘进 HTML：
<svg width="24" height="24" viewBox="0 0 24 24" fill="currentColor">
<path d="M12 2 L2 22 L22 22 Z"/>
</svg>
fill="currentColor" 让图标颜色跟随父元素的文字颜色，改色只需改 CSS 的 color。预期结果是图标随文字颜色变化，且不产生额外网络请求。
外部 SVG
用 <img> 引用：
<img src="icon.svg" alt="说明文字" width="24" height="24">
这种方式浏览器会缓存文件，但无法用 CSS 改图标内部颜色，因为 <img> 里的 SVG 是独立文档。如果必须改色，改用 SVG Sprite 加 <use>：
<svg width="24" height="24"><use href="sprite.svg#icon-name"></use></svg>
图标字体（以 FontAwesome 为例）
按官方文档引入 CSS 后，用类名调用图标。具体类名和引入地址以 fontawesome.com.cn 上的说明为准。预期结果是页面上出现对应图标，颜色和字号继承所在文本的样式。
验证方法：引入后打开页面，图标正常显示说明加载成功；如果显示成方块或空白，先看 CSS 文件是否 404，再看类名是否拼错。
怎么按项目需求选图标库
选之前先确认这几个条件：
- 授权：商用项目要确认许可范围。FontAwesome 中文版页面标注为完全免费，但正式项目仍建议核对官方许可条款。
- 图标数量与风格：图标够不够用、线条粗细和圆角风格是否统一，比数量多更重要。
- 接入成本：已经用了 CSS 框架的项目，图标字体接入最快；对体积敏感的项目，按需引入 SVG 更划算。
- 是否需要改色和动画：需要就优先 SVG，图标字体改色受字体渲染限制。
如果只是给按钮、导航加通用小图标，图标字体省事；如果是品牌图形、需要多色或动画，用 SVG。
常见问题和卡点
图标不显示：先查 CSS 或 SVG 文件路径是否 404，再查类名/文件名是否写错。图标字体还要确认字体文件本身加载成功。
颜色改不动：用 <img> 引入的 SVG 改不了内部颜色，换成内联 SVG 或 <use> 方式，并用 currentColor。
图标被读屏软件念出乱码：装饰性图标加 aria-hidden="true"，有含义的图标补 aria-label 或可见文字说明。
图标字体加载前闪烁：字体文件未加载完时可能先显示占位字符，可通过 font-display 或预加载缓解。
只用一个图标却引入整套字体：这种情况改用单个 SVG 更省流量。