Styling links with CSS & Font Awesome
<style>
body {
padding: 1em;
background: black;
}
a:before {
clear: both;
content: " ";
display: table;
}
a:after {
display: inline-block;
font: normal normal normal 14px/1 FontAwesome;
font-color: white;
font-size: inherit;
text-rendering: auto;
-webkit-font-smoothing: antialiased;
margin-left: 5px;
}
/* fully valid URL, likely external link */
a[href^="http://"]:after {
content: "\f08e";
color: #333;
}
/* PDF file */
a[href$=".pdf"]:after {
content: "\f1c1";
color: red;
}
/* Microsoft Word document */
a[href$=".doc"]:after,
a[href$=".docx"]:after {
content: "\f1c2";
color: #2c5898;
}
/* Microsoft Excel document */
a[href$=".xls"]:after,
a[href$=".xlsx"]:after {
content: "\f1c3";
color: #207347;
}
/* Music file */
a[href$=".mp3"]:after {
content: "\f1c7";
color: #333;
}
/* Archive file */
a[href$=".zip"]:after {
content: "\f1c6";
color: #fdb516;
}
<style>
<a href="http://www.domain.com/filetype.pdf">Link to PDF document</a>
<a href="http://www.domain.com/">External link</a>
<a href="http://www.domain.com/filetype.doc">Microsoft Word Document link</a>
<a href="http://www.domain.com/filetype.xls">Microsoft Excel Document link</a>
<a href="http://www.domain.com/filetype.mp3">MP3 File link</a>
<a href="http://www.domain.com/filetype.zip">ZIP File link</a>