H2 中的图像（每个 h2 唯一）

Question

我创建了一个自定义 H2 CSS 标记，为 H2 提供了完整的蓝色背景和内部白色字母。

现在我想在其中一些 h2 中添加自定义小图标。

比如我有一个叫Features的h2，现在我想在它前面加一个小齿轮图标。

就以下方面而言，最好的处理方法是什么： - 搜索引擎优化：在我的 h2 中放置图像是否有问题 - 编码：我只是将其添加为 H2 标签内的一个，但现在图像未居中对齐（垂直）。

Answer 1

这可以通过在 h2 元素中添加一个 img 元素来解决。

但请记住，由于这是一张装饰图片，您需要有一个空的 alt 属性。更多信息：Accessibility Tip: Empty alt Attributes

<h2>
  <img src="gear.svg" alt=""> 
  Features
</h2>

提示：使用 flexbox 垂直对齐图标和文本

h2 {
  display: flex;
  align-items: center;
}