Auto Add Font Awesome Icons For Text Links Using Automaticon.css

Preview:

Description:

Automaticon.css is a smart CSS library that automatically detects the file extensions or URLs’ content of your links and adds the corresponding icons to them using Font Awesome icon font.

How to use it:

Include the required Automaticon.css and Font Awesome into your document.

<link rel="stylesheet" href="//netdna.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css">
<link rel="stylesheet" href="css/automaticon.css">

Wrap the text links into a container with the CSS class of ‘automaticon’ .

<div class="automaticon">
  <a href="test.doc">Text</a>
  <a href="http://www.facebook.com/">Facebook</a>
</div>

That’s it. If you want to disable the automatic icon on a specified link, just add a CSS class ‘no-automaticon’ to the A tag.

<div class="automaticon">
  <a href="test.doc">Text</a>
  <a href="http://www.facebook.com/">Facebook</a>
  <a class="no-automaticon" href="test.pdf">PDF </a>
</div>