How to Create Unicode Icons With CSS
These Unicode icons are a neat an alternative to using images (i.e. gifs) as symbols for your website.
CSS
a[href^="mailto:"]:before { content: "\2709"; }
.phone:before { content: "\2706"; }
.important:before { content: "\27BD"; }
blockquote:before { content: "\275D"; }
blockquote:after { content: "\275E"; }
.alert:before { content: "\26A0"; }
:before, :after {
color: purple;
}
p, blockquote {
margin: 20px;
}
body, a {
color: #333;
text-decoration: none;
font-size: 21px;
}
|
Sample HTML
<p><a href="mailto:[email protected]"> The unicode icon on the left is perfect for indicating email addresses </a></p>
<p> To the left is a unicode icon for a phone number </p>
<p> The icon on the left is a unicode icon to indicate an important message. </p>
<blockquote> This message is enclosed in two types of unicode icons; one for before and one for after. </blockquote>
<p> The icon on the left is a unicode icon for 'alert' messages <p>
|
0
515
