# 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 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>

- One link
- Another link that has a lot more words than the others because that's good for conversion, right?
- One too many

    <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><br />
    <a href="#" class="icon-arrow disabled">Disabled</a>

Active
Disabled

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

Active
Disabled

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

Active
Disabled