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

Category: CSS & CSS3 | November 14, 2014
Author: andrefirchow
Views Total: 2,029
Official Page: Go to website
Last Update: November 14, 2014
License: MIT

Preview:

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

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>

 

You Might Be Interested In:


Leave a Reply