Wednesday, January 25, 2012

Create Common Unicode Icons With CSS


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>

No comments:

Post a Comment