Oracle JET uses icon fonts whenever possible to render images provided by the Alta theme. When icon fonts are not possible, Oracle JET uses image files. In either case, framework images support high contrast mode. Oracle JET also provides CSS classes for most framework images.
For examples of framework images, see Framework Images.
You may also find the following topics helpful when working with images.
There are a variety of ways to load icons, such as sprites, data URIs, icon fonts, and so on. Factors to consider when choosing an image strategy include:
Themable: Can you use CSS to change the image? Can you replace a single image easily?
High contrast mode: Does the image render properly in high contrast mode for accessibility?
High resolution support: Does the image look acceptable on high resolution (retina) displays?
Browser support: Do you require support for all browsers? Some browsers may not support certain image formats, such as SVG.
Image limitations: Are there limitations that impact your use case? For example, icon fonts are a single color, and small SVG images often do not render well.
Performance: Is image size a factor? Do you need alternate versions of an image for different resolutions or states such as disabled, enabled, hover, and active?
Oracle JET uses icon fonts whenever possible because icon fonts have certain advantages over other formats.
Themable: You can use style classes to change their color instead of having to replace the image, making them very easy to theme.
High contrast mode: Icon fonts are optimal for high contrast mode as they are considered text. However, keep in mind that you can't rely on color in high contrast mode, and you may need to indicate state (active, hover, and so on) using another visual indicator. For example, you can add a border or change the icon font's size. For additional information about Oracle JET and high contrast mode, see Configuring High Contrast Mode.
High resolution: Icon fonts look good on a high resolution (retina) display without providing alternate icons.
Performance: You can change icon font colors using CSS so alternate icons are not required to indicate state changes. Alternate images are also not required for high resolution displays.
Icon fonts also have disadvantages. It can be difficult to replace a single image, and they only show one color. You can use text shadows to provide some depth to the icon font.
Oracle JET supports two generic classes for setting the icon font colors in the
These classes, when used in conjunction with an anchor tag and/or marker classes like
oj-disabled, will use the
oj-default as needed with
<div class="oj-default"> <span class="oj-clickable-icon demo-icon-font demo-icon-gear"></span> </div> <a href="http://www.oracle.com"> <span class="oj-clickable-icon demo-icon-font demo-icon-gear"></span> </a>
oj-clickable-icon-nocontext class is not contextual and must be placed on the same tag as shown in the example below.
oj-clickable-icon would also work in this example.
<span class="oj-default oj-clickable-icon-nocontext demo-icon-font demo-icon-gear"> </span> <a href="http://www.oracle.com" class="oj-clickable-icon-nocontext demo-icon-font demo-icon-gear"> </a>
For an example that illustrates icon font classes on a link, see Icon Fonts.