Link Icons
There are three standard icons for text links, each an arrow either before or after the link text.
Icon Types
There are three types of link icon.
-
.icon-arrow
, the usual orange arrow to the left of the link. -
.icon-arrow-back
, an orange arrow to the left of the link, pointing backwards. -
.icon-arrow-forward
, an orange arrow to the right of the link, pointing forward – for example for links that point to the next step in an ongoing process.
<a href="#" class="icon-arrow">Standard link icon</a>
<a href="#" class="icon-arrow-back">I'm backin' out</a>
<a href="#" class="icon-forward">Follow the man in that Taxi!</a>
Usage
All link icon classes can be applied either to lists containing a number of links, or to individual links.
<ul class="icon-arrow"> <li><a href="#">One link</a></li> <li><a href="#">Another link</a></li> <li><a href="#">One too many</a></li> </ul>
Disabled Links
All link icons have an inactive state for when you disable the link.
<a href="#" class="icon-arrow">Active</a> <a href="#" class="icon-arrow disabled">Disabled</a>
<a href="#" class="icon-arrow-back">Active</a> <a href="#" class="icon-arrow-back disabled">Disabled</a>