Alt or title attribute for i tag

html tags font-awesome
weltschmerz picture weltschmerz · Jul 31, 2012 · Viewed 91.4k times · Source

I use font-awesome and display their fonts like that:

<i class="icon-lock"></i>

This will display a nice little lock symbol. For the user to know what exactly that means, I tried adding attributes such as title and alt, but to no avail.

Is there any attribute I can use for the <i> tag that executes the same task as alt for images and title for links?

Answer

Jukka K. Korpela picture Jukka K. Korpela · Jul 31, 2012

You can use the title attribute on an i element, like any element, e.g.

<i class="icon-lock" title="This symbolizes your being locked inside"></i>

Whether it helps is a more difficult issue. Browsers usually show the title attribute value as a “tooltip” on mouseover, but why would the user mouse over the icon? And such tooltips are of poor usability; so-called CSS tooltips often work better.

Screen readers may give the user optional access to title attributes, but I’m not sure what they do with elements with empty content.

Related questions

How to get current formatted date dd/mm/yyyy in Javascript and append it to an input

I would like to add a current date to a hidden HTML tag so that it can be sent to the server: <input type="hidden" id="DATE" name="DATE" value="WOULD_LIKE_TO_ADD_DATE_HERE"> How can …

Read More
Adding attribute in jQuery

How can I add an attribute into specific HTML tags in jQuery? For example, like this simple HTML: <input id="someid" /> Then adding an attribute disabled="true" like this: <input id="someid" disabled="true" />

Read More
HTML tag <a> want to add both href and onclick working

I'd like to ask about HTML tag <a href="www.mysite.com" onClick="javascript.function();">Item</a> How to make this a tag working with href and onClick? (prefer onClick running first then href)

Read More