automaticon

Automatic Icons for Text-Links with FontAwesome

With this litte CSS file all textlinks inside a specified container with the class automaticon become a prefixed icon when they match one of the selectors below. You don't have to assign additional classes to the links, the icons will set automatically. The CSS-Selectors check the file extension of the linked url, parts of the content of the url and some attributes of all anchor-Tags. For the icons I used the awesome Icon-Font from FontAwesome.

If you want a link without an automatic icon set, just add the class no-automaticon to this specified anchor, it will be ignored then. If you add the class add-extension to the container next to automaticon, the file extensions will be added to all links (suffix with smaller font size) which are linked to known extensions automatically. See the examples below.

View on Github

CSS-Select by File Extension

PDF | PDF [class="no-automaticon"]

Text | Text | Text

Table | Table | Table | Table

Feed | Feed

Compressed | Compressed | Compressed | Compressed | Compressed

Image | Image | Image | Image | Image | Image | Image

Audio | Audio | Audio | Audio | Audio

Video | Video | Video | Video | Video | Video | Video

Vcard

iCal

Code | Code | Code

CSS-Select by URLs content

URL contains or starts with 'xxx'

Facebook [href*="facebook.com/"]

Twitter [href*="twitter.com/"]

Google+ [href*="plus.google.com/"]

YouTube [href*="youtube.com/"]

Vimeo [href*="vimeo.com/"]

Dribbble [href*="dribbble.com/"]

Flickr [href*="flickr.com/"]

Github [href*="github.com/"]

Stack Overflow [href*="stackoverflow.com/"]

Pinterest [href*="pinterest.com/"]

Instagram [href*="instagram.com/"]

LinkedIn [href*="linkedin.com/‎"]

Skype [href*="skype.com/"] | Skype [href^="skype:"]

Tumblr [href*="tumblr.com/"]

Xing [href*="xing.com/"]

Phone [href^="callto:"] | Phone [href^="tel:"]

Facetime [href^="facetime:"]

Source [href^="view-source:"]

E-Mail [href^="mailto:"]

Anchor [href^="#"]

CSS-Select by the attribute

Help [rel="help"]

Alternate [rel="alternate"]

Bookmark [rel="bookmark"]

License [rel="license"]

Chapter [rel="chapter"]

Prefetch [rel="prefetch"]

Download [download]

New Window [target="_blank"]