Icons¶
An glyph-font is supplied by this product to provide the icons that are used in the interfaces, as detailed below. Two patterns from CSS Tricks are used to display the icons:
The latter is used to display the Loading animation.
Icon details¶
Below are the details of the 22 icons provided by
gs.content.css. Where possible the glyphs are mapped onto
standard Unicode code points, with the XML character entity given
in the Character column. Using Unicode code-points allows them
to look vaguely right when typefaces other than the glyph-font
are being used. The non-standard icons are placed at the start of
the private-use area.
| Icon | Character | Std? | Note |
|---|---|---|---|
| Breadcrumb trail | |||
| Home | ⌂ |
Yes | A house |
| Separator |  |
No | A right-pointing chevron |
| Navigation | |||
| Left/Prev | ◃ |
Yes | Replaces “small left-triangle” |
| Up | ⬆ |
Yes | Replaces bold up arrow |
| Right/Next | ▹ |
Yes | Replaces “small right-triangle” |
| Web feed |  |
No | The RSS or ATOM symbol |
| Settings | ⚙ |
Yes | A cog |
| Lock | 🔒 |
Yes | Sign in |
| Actions | |||
| Share |  |
No | Arrow pointing out of a box |
| Reply | ➦ |
Yes | Arrow curving right (redo) |
| Delete | 🗑 |
Yes | Wastebasket (rubbish, trash) |
| Search | 🔍 |
Yes | Magnifying glass |
| Install |  |
No | Arrow pointing to a disk druve |
| True icons | |||
| Picture | 🎨 |
Yes | Replaces “artist palette” |
| Movie | 🎦 |
Yes | Replaces “movie projector” |
| Sound | 🔉 |
Yes | Speaker |
| Documents | 🗍 |
Yes | Replaces “empty pages” |
| Archive |  |
No | For zip and tar files |
| Attach | 📎 |
Yes | Paperclip (attachments exist) |
✉ |
Yes | An envelope | |
| Pin | 📌 |
Yes | For sticky topics |
| Linux |  |
No | Tux, for <groupserver.org> |
| Groupserver |  |
No | “GS”, for <groupserver.org> |
| Social-media services | |||
f |
No | The f character |
|
| Google Plus | g |
No | The g character |
t |
No | The t character |
|
| Devices | |||
| Mobile |  |
No | A cell-phone |
| Tablet |  |
No | |
| Laptop |  |
No | |
| Desktop |  |
No | A monitor, or screen |
| Text editing | |||
| Bold |  |
No | A bold B |
| Italic |  |
No | A italic I |
| Superscript |  |
No | x² |
| Subscript |  |
No | x₂ |
| Unlink |  |
No | A broken chain |
| Link |  |
No | A chain |
ul |
 |
No | Unordered list icon |
ol |
 |
No | Ordered list icon |
| Indent |  |
No | Indent list left |
| Outdent |  |
No | Indent list right |
| Code |  |
No | </> |
| Table |  |
No | |
| Paste |  |
No | A page and clipboard |
| Undo | ⎌ |
Yes | |
| Redo |  |
No | |
| Activity | |||
| spinner |  |
No | Animated (see Loading below) |
Enhance a word¶
Two data attributes can be used to add icons in order to enhance a word.
<button data-icon="◃">Newer</button>
<button data-icon-after="▹">Older</button>
The first attribute is data-icon. It take the character to
display (a left arrow in the above example) as its argument. That
character is displayed before the text within the element. By
using the data-icon attribute screen-readers do not “speak”
the icon, and older browsers degrade gracefully.
The second example above shows the data-icon-after
attribute. It displays the icon after the text within the
element; it is mostly used for Next buttons.
Standalone icons¶
Standalone icons need additional markup so screen-readers can “read” what the icon is, while visual browsers see the glyph. For example, the following displays a Web feed icon:
<a type="application/atom+xml" class="icon-alone" href="/some/feed.atom">
<span aria-hidden="true" data-icon=""></span>
<span class="screen-reader-text">Web feed</span>
</a>
- The outer element is marked up with the
icon-aloneclass. - The second element provides the icon, using the same
data-iconattribute that is used to enhance a word. Thearia-hiddenattribute prevents screen readers from “saying” the icon. - The third and final element provides the text for the
screen-reader. It is given the
screen-reader-textclass so it is hidden to visual browsers.
Loading¶
When loading data using AJAX it is desirable to show that
activity is taking place in the background. To do this the
Loading icon-character is provided with some CSS3 to animate the
icon so it spins. To create a Loading icon add a standalone icon
with the loading class:
<span data-icon="" aria-hidden="true"
class="loading"> </span>
| Note: | The space in the <span> </span> is important. Markup
processors (such as TAL) can turn XHTML self-closed
elements (<span/>) into unclosed elements. The side
effect is the entire paragraph is spun. |
|---|