Styling: CircularIcon
Oracle® JavaScript Extension Toolkit (JET)
17.1.0
G12196-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.
-
- Deprecated:
-
Since Description 10.0.0
This value will be removed in the future. Please use other colors. - Deprecated:
-
Since Description 10.0.0
This value will be removed in the future. Please use other colors. - Deprecated:
-
Since Description 10.0.0
This value will be removed in the future. Please use other colors.
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 pink
Pink Pink background purple
Purple Purple background lilac
Lilac Lilac background gray
Gray Gray background red
Red Red background forest
Forest Forest background
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>
-