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;
}