A look at the evolution of the use of icons in Notes applications and some of the latest techniques now being used in modern Domino applications.

1. Modern Domino
Icons
learn. do. dream.
www.redpilldevelopment.com

2. Embedded Icons
• Early versions of Notes supported
the pasting of icons as images into
various design element such as
forms.
• The age of this feature can be seen
by the format of the graphic files
supported. Graphic formats such as
BMP, CGM, PIC, and PCX. Today
formats such as JPG, PNG, and EPS
are more widely used.
• In the absence of design elements
or libraries to store these icons
gave rise to the Icon Library
database that many organizations
used to share icons for use in Notes
application.
learn. do. dream.
www.redpilldevelopment.com

3. Image Resources
• Image Resources were supported as a
design element as part of Notes R5
allowing icons to be shared across
design element and applications.
• The formats originally supported for
image resources were GIF and
JPG, with PNG being added in later
releases.
• Image resources work equally well for
both Notes client and Domino web
development.
• When developing for mobile web
applications pay close attention to
image sizes as download times for
large
image
files
can
cause
performance issues.
learn. do. dream.
www.redpilldevelopment.com

4. Glyphicons
• Lotus originally developed a a series of
view and action icons for use with
Notes client development.
• IBM has not been as forthcoming in
providing and out of the box library of
web icons for web and mobile
applications. As a result, Domino
developers need to develop their own
icons or source them externally.
• Made popular by their inclusion as part
of Twitter Bootstrap, glyphicons are a
library of monochromatic icons and
symbols that Domino developers
should consider making use of.
• A free icon library is available for those
not using bootstrap and a number of
additional libraries can be purchased
for Web development.
learn. do. dream.
www.redpilldevelopment.com

5. Image Sprites
• As the number of icons (or
graphics) used in an application
grows we need to consider the
performance
impact
of
downloading many image files.
• One of the most widely adopted
solutions has been image (aka CSS)
sprites in which all the icons are
combined in a single image file.
• Using CSS it is then possible to
display a specific portion of the
sprite image representing the
required icon.
• Tools are available to build a sprite
file from a collection of icons.
learn. do. dream.
www.redpilldevelopment.com

6. Iconic Fonts
• We are now seeing the
emergence of iconic fonts as the
latest “modern” way to add
icons to applications.
• In 1990 Microsoft developed
the Wingdings font allowing
commonly used icons to be
displayed as an alternative for
text.
• Iconic fonts were largely
forgotten for a while but we are
now seeing a resurgence of
their use as an alternative way
to implement icons within Web
applications.
learn. do. dream.
www.redpilldevelopment.com

7. Iconic Fonts: Advantages
• Fonts are stored in a vector format so
they can be displayed in a range of
sizes without distortion.
• As a font, icons can be styled using
standard CSS to create wide range of
effects:–
–
–
–
–
Color
Background color
Drop Shadow
Rotation
Animation
• A single icon can be used in a large
number of ways across an application
and can also be combined with other
icons to generate an ever wider range
of options.
learn. do. dream.
www.redpilldevelopment.com

8. Font Awesome
• Font Awesome has become one
of the more popular iconic fonts
thanks to its adoption within a
number of Bootstrap themes.
• Font
Awesome
(currently)
consists of a library of 361 icons
offered as part of an open
source project on Github.
• Version 4.0 of Font Awesome
was release in October 2013.
The latest release includes:– A complete renaming of icons to be
consistent with emerging standards
for icon-font usage.
– Addition of 11 new icons
learn. do. dream.
www.redpilldevelopment.com

9. Adding Font Awesome to Modern Domino
Instructions:
1. Download the latest version from fontawesome.io.
2. Using Package Explorer, place the content of the
downloaded zip file in a new folder under the
WebContent/css folder.
3. Add the stylesheet as a resource to your XPage.
Note: Russel Maher (XPages Tips) has a great blog article
(Five Minutes To Font Awesome Icons) covering this. An
nsf containing the fonts and examples of their use is
included.
learn. do. dream.
www.redpilldevelopment.com

10. Using Iconic Fonts via Attributes
• Iconic fonts are typically inserted by
adding a style class to a HTML
component that then uses the CSS
:before selector to insert the text and
assign the font.
• Some of the IBM XPages mobile
controls
such
as
the
RoundedRectListItem do not support
the output of class tags in the HTML via
the styleClass attribute.
• To place iconic fonts inside these
controls we can use the dojo attribute
property as an alternative.
• In our css we must change all the
references to the icon font to match on
comparable icon fonts designated via a
dojo attribute.
learn. do. dream.
XSP
CSS
www.redpilldevelopment.com