快速入门：在 HTML 中添加图标的基本流程
要在网页中显示图标，最常用的两种方式是字体图标库和原生 SVG。零基础也能上手，下面按步骤教你选择一种方式并把图标嵌入页面。
关键点一：先决定是使用字体图标库还是直接嵌入 SVG，这影响后续的代码结构和样式控制。
方法一：使用字体图标库（Font Awesome）
第一步是引入字体图标库的样式表，通常通过 CDN 载入。引入后，可以直接在需要的位置添加图标元素。
关键点二：在页面中放置图标元素时，通常使用 <i> 或 <span>，并给它对应的类名。
最后，可通过 CSS 调整图标的颜色和大小。颜色与大小是最常调整的格式属性。
.fa-solid { font-size: 28px; color: #1e90ff; }
方法二：使用原生 SVG 图标
SVG 图标的好处是可直接嵌入 HTML，样式通过 CSS 或直接属性控制，且不会随字体变动而失真。
你可以把 SVG 代码直接放在 HTML 中，或者以外部文件引入。原生 SVG 的颜色通常通过 fill 与 currentColor 实现，便于与文本颜色保持一致。
如果你选择外部文件，仍然可以用 <img> 标签加载，但要注意 SVG 的样式覆盖。
修改图标格式的实用技巧
图标一旦加入页面，修改样式以适配不同屏幕和主题成为常见需求。下面给出几种常用做法，兼容字体图标库与 SVG。
通过 CSS，可以让图标在布局中保持一致性，且实现响应式设计。使用 currentColor 让图标颜色跟随文本颜色是常见技巧之一。
如何用 CSS 调整字体图标的大小与颜色
对于字体图标库，最简单的控制是通过 font-size 与 color。
.icon-font { font-size: 32px; color: #33a1ff; }
你也可以让图标颜色继承父元素的文本颜色，确保在主题切换时自动同步。
.icon-font { color: inherit; }
如何控 SVG 的颜色与形状
SVG 图标的颜色通常通过 fill、stroke 控制；如果希望颜色随文本变化，可以设置 fill=“currentColor”。
.svg-icon { width: 40px; height: 40px; fill: #1abc9c; }
.svg-icon-current { width: 1.5em; height: 1.5em; fill: currentColor; }
为了实现响应式尺寸，可以使用相对单位，例如 em 或 rem，结合父容器的字体大小变化来自动缩放。
