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); }