Core Framework v2.0.1 – Documentation

Icons for Links

There are three standard icons for text links, each an arrow either before or after the link text.

  1. Icon Types
  2. Usage
  3. 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>
Standard link icon 
<a href="#" class="icon-arrow-back">I'm backin' out</a>
I'm backin' out 
<a href="#" class="icon-arrow-forward">Follow the man in that Taxi!</a>
Follow the man in that Taxi!

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</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>
Who Needs Lists Anyway

Disabled Links

All link icons have an inactive state for when you disable the link.

Disabled links
<a href="#" class="icon-arrow">Active</a>
<a href="#" class="icon-arrow disabled">Disabled</a>
Active
Disabled 
<a href="#" class="icon-arrow-back">Active</a>
<a href="#" class="icon-arrow-back disabled">Disabled</a>
Active
Disabled 
<a href="#" class="icon-arrow-forward">Active</a>
<a href="#" class="icon-arrow-forward disabled">Disabled</a>
Active
Disabled