treehouse : what would you like to learn today?
Web Design Web Development iOS Development

Common Unicode Icons

Last updated on:

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"; }
<p>
  <a href="mailto:chriscoyier@gmail.com">
    chriscoyier@gmail.com
  </a>
</p>

<p class="phone">
    555-555-5555
</p>

<p class="important">
  REMEMBER: drink slushies too fast.
</p>

<blockquote>
   Designers tend to whisper, ad agencies tend to shout.
</blockquote>

<p class="alert">
   Stranger Danger!
<p>

Reference URL

View Comments

Comments

  1. cnwtx
    Permalink to comment#

    For the phone you can also use this:

    
    a[href^="tel:"]:before             { content: "\2706"; }
    
  2. Mohinder Basta
    Permalink to comment#

    How can i make a menu (Link) in the vertical direction (from top to bottom)
    that contain the different image or icon before every link.
    how can i make it with css and html

    i want to use the ul and li for navigation

    • dennis
      Permalink to comment#

      You can give the ul an id/class of nav (example) for styling, and you can give each li an id/class

      .nav

      .nav first { background: url(“”) }
      .nav second

      etc..

Leave a Comment

Use markdown or basic HTML and be nice.