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.

<head>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">
</head>

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^="mailto:"]::before,
a[href^="tel:"]::before,
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);
}

Tags

Categories

Leave a Reply