Icon Viewer

Icon Viewer This small utility dialog displays zoglair icon sets and allows you to identify specific icons for embedding them wherever you want.

Icons from those sets cannot be displayed as standalone images do, because they aren't saved individually. Instead, they are packed together (according to their size) in one bigger compound image, and displayed using a technique known as CSS Sprite.

So, in order to display any icon from these sets, you need to know the following:

  1. the set where it is included (expressed as a decimal 2-digit icon width)
  2. its column (expressed as a hex digit), and
  3. its row (expressed as a hex digit)

Combining the size, column and row digits, a 4-char identifier is built which uniquely identifies any icon. Thankfully, this utility saves your day:

  1. click on an icon set on the left
  2. mouse over a particular icon on the right
  3. see the code on the bottom

How you use the code displayed? It's easy... If you take a look at the screenshot, you will see that the bar-chart icon has an id of:

icon3223

To display that icon in your text, just use its id as you would use a regular image id:

{{icon3223}}

If you do that, the result will be:

(C) Nick B. Cassos - All Rights Reserved
powered by zoglair
page generated in 75ms (11 queries, 11ms)