Common Unicode Icons

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"; }
  <a href="">

<p class="phone">

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

   Designers tend to whisper, ad agencies tend to shout.

<p class="alert">
   Stranger Danger!


  1. User Avatar
    Permalink to comment#

    For the phone you can also use this:

    a[href^="tel:"]:before             { content: "\2706"; }
  2. User Avatar
    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

    • User Avatar
      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 first { background: url(“”) }
      .nav second


  3. User Avatar
    Permalink to comment#

    And for uncommon unicode icons, convert your code from decimal to hexadecimal. E.g, instead of using &#9650; use:

    content: “\25B2”;

  4. User Avatar
    Permalink to comment#

    What about cross-browsering??? Do they work on old browsers? Thanx a lot!!!

Leave a Comment

Posting Code!

You may write comments in Markdown. This makes code easy to post, as you can write inline code like `<div>this</div>` or multiline blocks of code in triple backtick fences (```) with double new lines before and after.

Code of Conduct

Absolutely anyone is welcome to submit a comment here. But not all comments will be posted. Think of it like writing a letter to the editor. All submitted comments will be read, but not all published. Published comments will be on-topic, helpful, and further the discussion or debate.

Want to tell us something privately?

Feel free to use our contact form. That's a great place to let us know about typos or anything off-topic.