Automatic mailto and tel link icons

By using the "^=" css selector we can style links beginning with a certain keyword. This example gives all links that start with mailto: and tel: with an envelope resp. telephone icon using their font-awesome unicodes.

    <link rel="stylesheet" href="">
a[href^="mailto:"]::before {
    content: "\f0e0"; /* FA envelope icon */
a[href^="tel:"]::before {
    content: "\f095"; /* FA telephone icon */
We can use the same technique to target pdf file links. 
Instead of looking for a keyword at the beginning of links, 
we want to select all links ending with .pdf by using the $= (ends with) selector
a[href$=".pdf"]::before {
    content: "\f1c1"; /* FA file pdf 0 icon */

a[href$=".pdf"]::before {
    /* Standard FA styles */
    display: inline-block;
    margin-right: .5em;
    font: normal normal normal 14px/1 FontAwesome;
    font-size: inherit;
    text-rendering: auto;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    transform: translate(0, 0);

Leave a Reply