H2中的图像（每个h2唯一）[关闭]

Question

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

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

例如我有一个名为 Features 的 h2，现在我想在它前面添加一个小齿轮图标。

在以下方面进行的最佳方式是什么： - SEO：在我的 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;
}