Icons for Links
There are three standard icons for text links, each an arrow either before or after the link text.
Icon Types
Usage
Disabled Links
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.
Links with different link icons
<a href = "#" class = "icon-arrow" > Standard link icon </a> <a href="#" class="icon-arrow">Standard link icon</a>
<a href = "#" class = "icon-arrow-back" > I'm backin' out </a> <a href="#" class="icon-arrow-back">I'm backin' out</a>
<a href = "#" class = "icon-arrow-forward" > Follow the man in that Taxi! </a> <a href="#" class="icon-arrow-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.
Link icons on lists and individual links
<ul class = "icon-arrow" >
<li>
<a href = "#" > One link </a>
</li>
<li>
<a href = "#" > Another link that has a lot more words than the others because that's good for conversion, right? </a>
</li>
<li>
<a href = "#" > One too many </a>
</li>
</ul> <ul class="icon-arrow">
<li>
<a href="#">One link</a>
</li>
<li>
<a href="#">Another link that has a lot more words than the others because that's good for conversion, right?</a>
</li>
<li>
<a href="#">One too many</a>
</li>
</ul>
<a href = "#" class = "icon-arrow" > Who </a>
<a href = "#" class = "icon-arrow" > Needs </a>
<a href = "#" class = "icon-arrow" > Lists </a>
<a href = "#" class = "icon-arrow" > Anyway </a> <a href="#" class="icon-arrow">Who</a>
<a href="#" class="icon-arrow">Needs</a>
<a href="#" class="icon-arrow">Lists</a>
<a href="#" class="icon-arrow">Anyway</a>
Disabled Links
All link icons have an inactive state for when you disable the link.
Disabled links
<a href = "#" class = "icon-arrow" > Active </a><br>
<a href = "#" class = "icon-arrow disabled" > Disabled </a> <a href="#" class="icon-arrow">Active</a><br>
<a href="#" class="icon-arrow disabled">Disabled</a>
<a href = "#" class = "icon-arrow-back" > Active </a><br>
<a href = "#" class = "icon-arrow-back disabled" > Disabled </a> <a href="#" class="icon-arrow-back">Active</a><br>
<a href="#" class="icon-arrow-back disabled">Disabled</a>
<a href = "#" class = "icon-arrow-forward" > Active </a><br>
<a href = "#" class = "icon-arrow-forward disabled" > Disabled </a> <a href="#" class="icon-arrow-forward">Active</a><br>
<a href="#" class="icon-arrow-forward disabled">Disabled</a>