Web font icon to text link

Add web font icons to text link by link type and format

by webcreatorbox

HTML

<p>
アイコンフォントを使ってテキストをカスタマイズ！<a href="/example.html">内部のリンク</a>はリンクアイコン、 http:// から始まる<a href="http://example.com">外部リンク</a>はこんな感じ。mailto を使った<a href="mailto:[email protected]">メールリンク</a>にはメールアイコン。URLを指定することもできます。<a href="http://webcreatorbox.com/feed">RSSフィード登録はこちら</a>！的な…。<a href="example.pdf">PDFファイル</a>や<a href="example.jpg">画像ファイル</a>、<a href="example.zip">ZIPファイル</a>などなど、拡張子で指定もできますよー！
</p>
<p>
Customise your text with icon fonts! <a href="/example.html">Internal link text</a> with link icon, <a href="http://example.com">external link</a> starting with http:// is displayed with popup icon. <a href="mailto:[email protected]">Email link text</a> and URL specified link like <a href="http://webcreatorbox.com/feed">RSS feed subscribe</a> etc etc. You can select by format type like <a href="example.pdf">PDF file</a>, <a href="example.jpg">image file</a>, <a href="example.zip">ZIP file</a>!
</p>

CSS

a{
    color:#36c;
    text-decoration:none;
}
p{
    margin-bottom:20px;
}
@font-face {
    font-family: 'fontello';
    src: url("http://webcreatorbox.com/sample/font/fontello.eot");
    src: url("http://webcreatorbox.com/sample/font/fontello.eot?57098116#iefix") format('embedded-opentype'),     url("http://webcreatorbox.com/sample/font/fontello.woff") format('woff'), url("http://webcreatorbox.com/sample/font/fontello.ttf") format('truetype'), url("http://webcreatorbox.com/sample/font/fontello.svg#fontello") format('svg');
}

a:before{
    font-family: 'fontello';
    margin:0 3px;
}

/* 内部リンク - Internal Link */
a[href^="/"]:before, a[href^=".."] :before {
    content: 'l';
    color: #3cc;
}

/* 外部リンク - External Link */
a[href^="http://"]:before {
    content: 'e';
    color: #3cc;
}

/* メールリンク - Email Link */
a[href^="mailto:"]:before {
    content: 'm';
    color: #3cc;
}

/* URL指定 - URL Specified Link */
a[href="http://webcreatorbox.com/feed"]:before {
    content: 'r';
    color: #f93;
}

/* PDFファイル - PDF file */
a[href$=".pdf"]:before {
    content: 't';
    color: #0c6;
}

/* 画像ファイル - Image file */
a[href$=".jpg"]:before,
a[href$=".png"]:before,
a[href$=".gif"]:before{
    content: 'p';
    color: #96c;
}

/* ダウンロードファイル - Downloadable File */
a[href$=".zip"]:before {
    content: 'd';
    color: #f9c;
}