Styling: CircularIcon

Oracle® JavaScript Extension Toolkit (JET)
18.1.0
G25382-01

Description

Class to create circular icon.



Deprecated:
Since Description
11.0.0 Circular Icon has been deprecated. Please use iconClass and shape properties of oj-avatar instead.
.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
orange Orange Orange background
green Green Green background
teal Teal Teal background
blue Blue Blue background
slate Slate Slate background
mauve Mauve Mauve background
Deprecated:
Since Description
10.0.0 This value will be removed in the future. Please use other colors.
pink Pink Pink background
purple Purple Purple background
lilac Lilac Lilac background
gray Gray Gray background
red Red Red background
Deprecated:
Since Description
10.0.0 This value will be removed in the future. Please use other colors.
forest Forest Forest background
Deprecated:
Since Description
10.0.0 This value will be removed in the future. Please use other colors.

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>