Blueprint Link Icons

Install this plugin to get the assets and an example stylesheet:

compass install blueprint/link_icons

This file can be imported using: @import "blueprint/link-icons"

Mixins

view source

no-link-icon

=no-link-icon
  background: transparent none !important
  padding: 0 !important
  margin: 0 !important

@mixin no-link-icon {
  background: transparent none !important;
  padding: 0 !important;
  margin: 0 !important;
}

view source

link-icon-base

=link-icon-base
  padding: 2px 22px 2px 0
  margin: -2px 0
  background-repeat: no-repeat
  background-position: right center

@mixin link-icon-base {
  padding: 2px 22px 2px 0;
  margin: -2px 0;
  background-repeat: no-repeat;
  background-position: right center;
}

view source

link-icon($name, $include-base)

=link-icon($name, $include-base: true)
  @if $include-base
    +link-icon-base
  background-image: image-url("link_icons/#{$name}")

@mixin link-icon($name, $include-base: true) {
  @if $include-base {
    @include link-icon-base;
  }
  background-image: image-url("link_icons/#{$name}");
}

view source

link-icons

=link-icons
  a[href^="http:"],
  a[href^="mailto:"],
  a[href^="http:"]:visited,
  a[href$=".pdf"],
  a[href$=".doc"],
  a[href$=".xls"],
  a[href$=".rss"],
  a[href$=".rdf"],
  a[href^="aim:"]
    +link-icon-base
  a[href^="http:"]
    +link-icon("external.png", false)
  a[href^="mailto:"]
    +link-icon("email.png", false)
  a[href^="http:"]:visited
    +link-icon("visited.png", false)
  a[href$=".pdf"]
    +link-icon("pdf.png", false)
  a[href$=".doc"]
    +link-icon("doc.png", false)
  a[href$=".xls"]
    +link-icon("xls.png", false)
  a[href$=".rss"],
  a[href$=".rdf"]
    +link-icon("feed.png", false)
  a[href^="aim:"]
    +link-icon("im.png", false)

@mixin link-icons {
  a[href^="http:"],
  a[href^="mailto:"],
  a[href^="http:"]:visited,
  a[href$=".pdf"],
  a[href$=".doc"],
  a[href$=".xls"],
  a[href$=".rss"],
  a[href$=".rdf"],
  a[href^="aim:"] {
    @include link-icon-base;
  }
  a[href^="http:"] {
    @include link-icon("external.png", false);
  }
  a[href^="mailto:"] {
    @include link-icon("email.png", false);
  }
  a[href^="http:"]:visited {
    @include link-icon("visited.png", false);
  }
  a[href$=".pdf"] {
    @include link-icon("pdf.png", false);
  }
  a[href$=".doc"] {
    @include link-icon("doc.png", false);
  }
  a[href$=".xls"] {
    @include link-icon("xls.png", false);
  }
  a[href$=".rss"],
  a[href$=".rdf"] {
    @include link-icon("feed.png", false);
  }
  a[href^="aim:"] {
    @include link-icon("im.png", false);
  }
}