Accessible Icons

Posted on

in

,

A common example of needing icons to be accessible is when they’re used as buttons eg. search button, left and right navigation buttons etc. To do this, add the css:

.fa span{
 text-indent: -9999px;
 display: inline-block;
}

and in your html just add the text in a span inside the icon like so:

<i class="fa fa-search><span>search</span></i>

 

Leave a Reply

Your email address will not be published. Required fields are marked *

About me

Mark Wong is a front end developer with 10+ years experience. Most of his knowledge of HTML5, CSS and Js is self taught.

Calendar

May 2024
M T W T F S S
 12345
6789101112
13141516171819
20212223242526
2728293031