2

I'm looking for some help on something that I'm really struggling to get my head around.

I've ran my website through Nibbler and I'm seeking a 10/10 mark on all (if not most) of the categories.

One thing that I'm really struggling with is the 17 occurrences of Font Awesome <i> tag's that it suggests I shouldn't be using.

As far as I'm aware, the proper syntax from FA's documentation should be:

<i class="fa fa-check"></i>

The guidance on Nibbler suggests:

2 pages of this website were found to be using the tag <i>. It is widely regarded that use of presentational elements like <i> should be avoided.

Replace all the instances of presentational tags with a semantic alternative. This means where possible, use semantically correct HTML and then style it with CSS.

It's only a 2 page website so far but if I continue working with the same practice, more instances are going to flag up, so I'd really prefer to find some help with a fix before I go any further.

Does any one have any suggestions on alternate ways around this? Thanks in advance.

Community
  • 1
  • 1
icanclimbmountains
  • 21
  • 2

3 Answers3

8

You could replace

<i class="fa fa-check"></i>

with

<span class="fa fa-check"></span>
linktoahref
  • 7,812
  • 3
  • 29
  • 51
0

I think it should work and do like this.try with link font-awesome online .try this

<html xmlns="http://www.w3.org/1999/xhtml">
<head>

<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>fa</title>

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">



</head>

<body>
<i class="fa fa-check"></i><input type="text"/>

</body>
</html>

link font-awesome style sheet online by adding this

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">

between end <title> and end <head> tags.

caldera.sac
  • 4,918
  • 7
  • 37
  • 69
0

add aria-hidden="true" to your <i> tag or <span> tag

<i class="fa fa-check" aria-hidden="true"></i>
Suraj Rao
  • 29,388
  • 11
  • 94
  • 103
mikeion
  • 1
  • As it’s currently written, your answer is unclear. Please [edit] to add additional details that will help others understand how this addresses the question asked. You can find more information on how to write good answers [in the help center](/help/how-to-answer). – Community Sep 15 '22 at 07:32