1

I would like to add the name base on the attribute title as there is no text displayed for the link but instead a icon using font-awesome

My link are like this :

<a itemprop="url" href="whatever.html">
  <i class="fa fa-home" title="Home"></i>
</a>

I need solution without javascript involve

Anyone_ph
  • 616
  • 6
  • 15
  • 1
    Are you aware that your markup is not accessible? Some of your visitors might not be able to visit this link or understand what it’s about. – unor May 09 '16 at 15:23
  • Yes actually in the "real" code, I use jquery ui (tooltip) so passing the mouse over it will show the "description" of the link (but agree it can be tricky for no js browser), thanks for your concern and advise will keep it in mind – Anyone_ph May 10 '16 at 04:46

1 Answers1

2

Like this:

<a itemprop="url" href="whatever.html">
  <i class="fa fa-home" title="Home"></i>
  <meta itemprop="name" content="Whatever Name You Want" />
</a>

(Note edited to remove incorrect alternative after below discussion).

Though as an aside, as per below conversaation, some question on whether <i> tag should even be used: Should I use <i> tag for icons instead of <span>?

Community
  • 1
  • 1
Barry Pollard
  • 40,655
  • 7
  • 76
  • 92
  • 1
    Are you sure `content=` is processed by Google Structure Data Testing Tool (GSDTT)? It's valid for `RDFa` and processed by `RDFa` validators, but the last time I checked it was not processed by GSDTT. – Jay Gray May 09 '16 at 11:08
  • Yup - use it myself. Try it and you'll see. – Barry Pollard May 09 '16 at 11:17
  • 1
    It’s [not valid](http://stackoverflow.com/a/27089168/1591669) in HTML5+Microdata to have a `content` attribute on the `a` or `i` element (it’s only allowed on the `meta` element). – unor May 09 '16 at 15:22
  • Fair enough. I use the first format. Also is even valid anymore and shouldn't it be ? Dunno why some frameworks insist on as some validators warn on mixing presentation and content. http://stackoverflow.com/questions/11135261/should-i-use-i-tag-for-icons-instead-of-span – Barry Pollard May 09 '16 at 15:28
  • IMHO the GSDTT will not process the value for `content=` when used in ``, even when using your clever work-around. Per @unor, it will be processed in ``. I'm not dismissing the validity of your structure; I'm commenting only WRT GSDTT. – Jay Gray May 09 '16 at 16:58
  • 1
    Well I'm telling you GSDTT does pick it up for my site. I use it for "name" and also for "logo" (as I wanted a different logo in the info box than on my site). I recently changed the logo and, not only does this show GSDTT, but Google also picked it up and correctly displayed the new logo in the info box a few days later. – Barry Pollard May 09 '16 at 17:05
  • It valid w3c html5 (validator.nu) and Google snippet tester show the name as I requested You have my respect sir thanks ! – Anyone_ph May 10 '16 at 04:42