Styling: Icons
Oracle® JavaScript Extension Toolkit (JET)
17.0.0
F92240-01
Description
Style classes for the Icons
-
.oj-clickable-icon
-
JET supports sass variables like $iconColorDefault, $iconColorHover, $iconColorActive, etc. When this class is used in conjunction with icon fonts the variable values will be used for default/hover/active/etc. WARNING: this class is contextual, the colors will be seen if any ancestor is either a link or uses marker classes like oj-default, oj-hover, oj-active, etc.
Example
<a href="http://www.oracle.com"> <span class="oj-clickable-icon demo-icon-font demo-home-icon-24"> </span> home </a>
-
.oj-clickable-icon-nocontext
-
The class is not contextual, so it must go directly on the anchor or on element with markers oj-default, oj-hover, oj-active, etc.
Example
<a href="http://www.oracle.com"> <span class="oj-clickable-icon-nocontext demo-icon-font demo-home-icon-24"> </span> home </a>
-
.oj-fwk-icon
-
Framework icons are deprecated.
Deprecated:
Since Description 9.0.0
Internal Oracle teams should replace with Redwood icons, external teams may want to use apex (https://apex.oracle.com/fontapex/) or font awesome (https://fontawesome.com/icons) -
.oj-icon
-
In high contrast mode (an accessibility setting for people with low visual acuity) background images will disappear on some browsers. ".oj-icon" has default values set for using css to show a high contrast icon (like a default height, width, etc). You can use the "oj-icon-content" mixin to generate a selector with additions/overrides. The generated css can be used in conjunction with ".oj-icon" for images that will work in high contrast mode.
Example
<div class="oj-icon demo-gear" role="img" aria-label="gear"></div>
-
Category: Framework Icon
-
Framework icons are deprecated.
Class template:
-
.oj-fwk-icon-
[fwk-icon]
Note: Square brackets signify required token substitutions whereas parentheses signify optional token substitutions.
-
Values for
[fwk-icon]
Value (required) Name Description arrow-e
arrow-e arrow-e arrow-n
arrow-n arrow-n arrow-ne
arrow-ne arrow-ne arrow-nw
arrow-nw arrow-nw arrow-s
arrow-s arrow-s arrow-se
arrow-se arrow-se arrow-sw
arrow-sw arrow-sw arrow-w
arrow-w arrow-w arrow02-e
arrow02-e arrow02-e arrow02-n
arrow02-n arrow02-n arrow02-ne
arrow02-ne arrow02-ne arrow02-nw
arrow02-nw arrow02-nw arrow02-s
arrow02-s arrow02-s arrow02-se
arrow02-se arrow02-se arrow02-sw
arrow02-sw arrow02-sw arrow02-w
arrow02-w arrow02-w arrow03-e
arrow03-e arrow03-e arrow03-n
arrow03-n arrow03-n arrow03-ne
arrow03-ne arrow03-ne arrow03-nw
arrow03-nw arrow03-nw arrow03-s
arrow03-s arrow03-s arrow03-se
arrow03-se arrow03-se arrow03-sw
arrow03-sw arrow03-sw arrow03-w
arrow03-w arrow03-w arrowtail-e
arrowtail-e arrowtail-e arrowtail-n
arrowtail-n arrowtail-n arrowtail-s
arrowtail-s arrowtail-s arrowtail-w
arrowtail-w arrowtail-w back
back back next
next next calendar-clock
calendar-clock calendar-clock calendar
calendar calendar clock
clock clock caret-e
caret-e caret-e caret-n
caret-n caret-n caret-s
caret-s caret-s caret-w
caret-w caret-w caret02-e
caret02-e caret02-e caret02-n
caret02-n caret02-n caret02-s
caret02-s caret02-s caret02-w
caret02-w caret02-w caret02end-e
caret02end-e caret02end-e caret02end-n
caret02end-n caret02end-n caret02end-s
caret02end-s caret02end-s caret02end-w
caret02end-w caret02end-w caret03-e
caret03-e caret03-e caret03-n
caret03-n caret03-n caret03-s
caret03-s caret03-s caret03-w
caret03-w caret03-w checkbox-off
checkbox-off checkbox-off checkbox-on
checkbox-on checkbox-on checkmark
checkmark checkmark corner-drag
corner-drag corner-drag cross
cross cross cross02
cross02 cross02 cross03
cross03 cross03 dots-horizontal
dots-horizontal dots-horizontal dots-vertical
dots-vertical dots-vertical drag-horizontal
drag-horizontal drag-horizontal drag-vertical
drag-vertical drag-vertical drag
drag drag folderhierarchy
folderhierarchy folderhierarchy grid
grid grid hamburger
hamburger hamburger help
help help info
info info list
list list magnifier
magnifier magnifier marquee
marquee marquee maximize
maximize maximize message-confirmation
message-confirmation message-confirmation message-error
message-error message-error message-info
message-info message-info message-warning
message-warning message-warning minimize
minimize minimize minus
minus minus node-collapse
node-collapse node-collapse node-expand
node-expand node-expand pan
pan pan plus
plus plus radiobutton-off
radiobutton-off radiobutton-off radiobutton-on
radiobutton-on radiobutton-on sort
sort sort sortrelevancehigh
sortrelevancehigh sortrelevancehigh tree-document
tree-document tree-document tree-folder-collapsed
tree-folder-collapsed tree-folder-collapsed tree-folder-open
tree-folder-open tree-folder-open tristate-partial
tristate-partial tristate-partial users
users users warning
warning warning zoom-in
zoom-in zoom-in zoom-out
zoom-out zoom-out
Deprecated:
Since Description 9.0.0
Internal Oracle teams should replace with Redwood icons, external teams may want to use apex (https://apex.oracle.com/fontapex/) or font awesome (https://fontawesome.com/icons) -
-
Category: Icon Colors
-
Sets the color for icon font icons. In Redwood these classes use the !important rule.
Class template:
-
.oj-icon-color-
[icon-color]
Note: Square brackets signify required token substitutions whereas parentheses signify optional token substitutions.
-
Values for
[icon-color]
Value (required) Name Description primary
Primary icon color Primary icon color secondary
Secondary icon color Secondary icon color disabled
Disabled icon color Disabled icon color danger
Danger icon color Danger icon color warning
Warning icon color Warning icon color success
Success icon color Success icon color info
Success icon color Success icon color
Example
<span class="oj-icon-color-secondary oj-ux-ico-heart-s" role="img" aria-label="heart"></span>
-