Create Common
Unicode Icons With CSS
Here’s a pretty neat and easy way to use Unicode icons as an
alternative for using images (i.e. gifs) as symbols to indicate certain
contents inside your web page. You can visit cool resources for more Web Design tutorials.
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:chriscoyier@gmail.com"> The
unicode icon on the left is perfect for indicating email addresses
</a></p>
<p class="phone"> To the left is a unicode icon for a
phone number </p>
<p class="important"> 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 class="alert"> The icon on the left is a unicode
icon for 'alert' messages <p>
|
