Ad

Image In H2 (unique Per H2)

- 1 answer

I created a custom H2 CSS markup with gives the H2 a full-with blue background and white letters inside.

Now I want to add a custom small icon in some of these h2's.

for example I have an h2 called Features, now I want to add a small gear icon in front of it.

What is the best way to proceed in terms of: - SEO: Is it a problem to have an image inside my h2 - coding: I just added it as a inside the H2 tags, but now the image is not aligned in the center (vertically).

Ad

Answer

This can be solved by having an img-element inside the h2-element.

But remember, since this is a decorative image, you need to have an empty alt-attribute. More information: Accessibility Tip: Empty alt Attributes

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

Tip: Use flexbox to vertical align the icon and text

h2 {
  display: flex;
  align-items: center;
}
Ad
source: stackoverflow.com
Ad