Working with Framework Images

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.


Image Considerations

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?

Icon Fonts

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 $iconColorDefault, $iconColorHover, $iconColorActive, $iconColorSelected, and $iconColorDisabled variables.

  • oj-clickable-icon

  • oj-clickable-icon-nocontext

These classes, when used in conjunction with an anchor tag and/or marker classes like oj-default, oj-hover, oj-focus, oj-active, oj-selected, and oj-disabled, will use the $iconColor* variables.

The oj-clickable-icon class is optionally contextual, meaning the anchor or marker style can be on an ancestor as shown in the example below. The example assumes that a JavaScript method is replacing oj-default as needed with oj-hover, oj-focus, oj-active, oj-selected, and oj-disabled.

<div class="oj-default">
  <span class="oj-clickable-icon demo-icon-font demo-icon-gear"></span>
<a href="">
  <span class="oj-clickable-icon demo-icon-font demo-icon-gear"></span>

The 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">
<a href=""
   class="oj-clickable-icon-nocontext demo-icon-font demo-icon-gear">

For an example that illustrates icon font classes on a link, see Icon Fonts.

Image Files

Oracle JET uses images when icon fonts can't be used. Informational images must appear in high contrast mode for accessibility, as described in Configuring High Contrast Mode.

Oracle JET provides Sass mixins that you can use to create CSS for your own icons. For examples, see CSS Images.