Creative Commons License
Unicode Inspiration: Shapes and Symbols in Web Development by Michaux Kelley (content) is licensed under a Creative Commons Attribution-Share Alike 3.0 United States License.
Based on a work at webamused.wordpress.com.

Rejoice in Unicode for Technical and Non-Technical People

If you’re not familiar with Unicode (what is unicode?),
it’s really no big deal (unless you’re a developer: why you need to know
unicode. Thank you Jeff Elmore for pointing me to this link.).
This article would addresses how to take advantage of
the symbols and shapes you can extract using Unicode. Don’t worry: few developers
have an in-depth understanding of Unicode and/or its significance, but that’s
not what this article is about so you can read on blissfully ignorant or
well-aware an not be confused or bored.

Finding Graphical Purpose Through Simplicity

In web development I frequently use arrows and other symbols to draw
attention to a particular feature on a page. Simplicity is key, because the
actual content is what’s important right? These symbols/shapes can be widely
found in most graphics programs (free and paid) with a little digging or
familiarity. However, sometimes you want a shape or symbol that stands apart
or neatly fits the bill for exactly the graphic you want display. Enter Unicode.

Unicode in Graphics as an Alternative

There are an abundance of articles dealing with how to display symbols and
shapes in an HTML web page using Unicode. Few of these suggest using graphics.
In fact, you may discover that some articles advise against using graphics
in place of text, but most of these are referring to human-readable words, not
symbols/shapes. While you could make use of Unicode textually, I advise against
it. Browser-support can be limited or spotty, styling just adds more technical
requirements to achieve what you want, Unicode-based symbols/characters will
be meaningless to vision-impaired people and don’t we type enough already?

Resources Used to For The Unicode Symbol to Graphic Conversion

My life a as a web developer has become much easier because of the
following resources (worth the download even if you don’t use them to
for the technique described in this article):

How to Make the Conversion from Unicode Symbol to Graphic

  1. Open FireFox and Firebug: go to any Page

    1. Now, go to the Tools
      menu. Select Firebug > Open Firebug
    2. From the Firebug console that opens in the bottom of the brower,
      click the tab labeled HTML.
    3. Next, click Edit, located to the right of the bug graphic after the
      word Inspect.
    4. Begin typing the following somewhere in the body element of
      the HTML that you see: <p> & #x25BC; (remove the space between & and #)<p>. Notice that a new
      symbol now appears in the page that you’re on. Keep this page open.

  2. Right-click for Aardvark

    1. Right-click anywhere on the page. Select Start Aardvark from the
      context menu that appears.
    2. Move the mouse over the (down-arrow) symbol that you created. An orange
      border should appear. With the symbol highlighted press the i on
      the keyboard. Now the symbol is all by itself.
    3. Now press CMD/apple key (or CTRL if you’re on a PC) plus the plus symbol “+”
      until you enlarge the arrow as much as possible.

  3. Grab it with Screengrab

    1. Right-click on the page. Select Screengrab > Save…
      > Selection…
    2. Notice that the page is highlighted in pink or some color. Click and hold
      at a point to the top and left of the symbol.
    3. While holding the left-mouse
      button down, drag in a south-east direction until the shape is surrounded
      by a rectangle and release.
    4. In the Save As textbox of the dialog that appears rename your
      shape to “DownArrow.png” (without the quotes).
    5. Open it with GIMPshop and begin making it the symbol you’ve always wanted.
      Enjoy!