12

For making a user friendly website, I have to use some of Font Awesome fonts in <h> elements like this:

<h2>
<i style="color: rgb(102, 149, 45); vertical-align: inherit;" class="fa fa-gear"></i>
 Performance
</h2>

In fact, this is a review article. Is it OK to put these fonts (or <i> elements) in the inner HTML of header elements like <h1>, <h2>, <h3>, etc.?

Please provide your source or some documentation, too, because it's really important for me; I don't want to make any mistakes about this topic.

unor
  • 21,919
  • 3
  • 47
  • 121
Amirreza Nasiri
  • 339
  • 3
  • 8

3 Answers3

11

I would say it wouldn't harm much, nor will it add anything. I prefer to keep my header tags clean and wouldn't add the i. The inline styling would be a bigger problem, which isn't really an big issue.

Instead of doing this, you can add the gear icon to the H2 directly:

h2.Geared:before{
    display: inline-block;
    color: rgb(102, 149, 45); 
    font-family: "FontAwesome";
    content: "\f013"; /*The actual character FontAwesome uses */
}

<h2 class="Geared">This text will have the gear</h2>
Martijn
  • 6,806
  • 19
  • 36
6

Google pays almost no attention to which tags you use these days. Google cares about how the page looks to users. It cares about which text is big. It cares about which text is prominent. It cares about which text is hidden. Recent SEO tests have shown that there is no difference between using a <div> tag that is styled to look like a heading and using a <h1> tag as far as Google is concerned.

I frown on using tags for italics rather than using CSS. It mixes semantics and presentation. However, from an SEO standpoint, there should be no negative or positive consequences.

Stephen Ostermiller
  • 99,822
  • 18
  • 143
  • 364
-1

Yes it's a bad idea. Use clear statement <h> tags, this is one of the rules of Google.

John Conde
  • 86,484
  • 28
  • 150
  • 244
user6521985
  • 9
  • 1