Styling: CircularIcon

Oracle® JavaScript Extension Toolkit (JET)
9.1.0
F30737-01

Version:
  • 9.1.0
PREVIEW: This is a preview API. Preview APIs are production quality, but can be changed on a major version without a deprecation path.
.oj-icon-circle
Place on an outer span tag to create a circular icon. By default, there is no border. Set the image content as a child of the span. Supported image types include icon fonts and SVG images.
Example
<span class="oj-icon-circle">
  <span class="oj-icon-circle-inner">
    <!-- demo-icon-circle-font class is accompanying class for icon font, do not use -->
    <!-- normal icon classes e.g.:oj-fwk-icon because they contain font sizes. -->
    <!-- Font sizes should instead be controlled by icon circle classes. -->
    <div class="demo-icon-calendar">
    </div>
  </span>
</span>
.oj-icon-circle-border
Add this class to the same outer span as oj-icon-circle to show a border around the icon.
Deprecated:
Since Description
9.0.0 Outer borders on circular icons are no longer recommended.
Example
<span class="oj-icon-circle oj-icon-circle-border">
   <span class="oj-icon-circle-inner">
     <div class="demo-icon-calendar">
     </div>
   </span>
</span>
.oj-icon-circle-inner
Place on a span that is a child of oj-icon-circle.
Example
<span class="oj-icon-circle">
   <span class="oj-icon-circle-inner">
     <div class="demo-icon-calendar">
     </div>
   </span>
</span>

Category: Icon Size

Sets the size of the circular icon. Default size is medium. Place on the same span that contains oj-icon-circle.

Class template:

.oj-icon-[icon-size]

Note: Square brackets signify required token substitutions whereas parentheses signify optional token substitutions.

Values for [icon-size]

Value (required) Name Description
xxs Extra Extra Small Icon size Extra Extra Small
xs Extra Small Icon size Extra Small
sm Small Icon size Small
md Medium Icon size Medium
lg Large Icon size Large
xl X-Large Icon size Extra Large
xxl XX-Large Icon size Extra Extra Large

Deprecated:
Since Description
9.0.0 Use .oj-icon-circle-[icon-size] instead of .oj-icon-[icon-size].
Example
<span class="oj-icon-circle oj-icon-sm">this is small text
</span>

Category: Icon Circle Color

Sets the color of the icon circle. If you leave the color class off the color is neutral.

Class template:

.oj-icon-circle-[circle-color]

Note: Square brackets signify required token substitutions whereas parentheses signify optional token substitutions.

Values for [circle-color]

Value (required) Name Description
red Red Red
orange Orange Orange
forest Forest Forest
green Green Green
teal Teal Teal
mauve Mauve Mauve
purple Purple Purple

Example
<span class="oj-icon-circle oj-icon-circle-red">
   <span class="oj-icon-circle-inner">
     <div class="demo-icon-circle-font">
     </div>
   </span>
</span>

Category: Icon Circle Size

Sets the size of the circular icon. Default size is medium. Place on the same span that contains oj-icon-circle.

Class template:

.oj-icon-circle-[icon-size]

Note: Square brackets signify required token substitutions whereas parentheses signify optional token substitutions.

Values for [icon-size]

Value (required) Name Description
xxs Extra Extra Small Icon size Extra Extra Small
xs Extra Small Icon size Extra Small
sm Small Icon size Small
md Medium Icon size Medium
lg Large Icon size Large
xl X-Large Icon size Extra Large
xxl XX-Large Icon size Extra Extra Large

Example
<span class="oj-icon-circle oj-icon-circle-sm">this is small text
</span>