Styling: Circular Icon

Oracle® JavaScript Extension Toolkit (JET)
8.0.0
F18189-01


Version:
  • 8.0.0
Class(es) Description Example Usage
oj-icon-circle

Place on outer span tag to create an icon circle. 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. 

           <!--Circle icon using icon font for image-->
            <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-circle-font oj-fwk-icon-calendar">
                </div>
              </span>
            </span>
oj-icon-circle-inner Place on span that is child of oj-icon-circle. 
            <!--Circle icon using icon font for image-->
             <span class="oj-icon-circle">
               <span class="oj-icon-circle-inner">
                 <div class="demo-icon-circle-font oj-fwk-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. 
              <!--Circle icon with border using icon font for image-->
               <span class="oj-icon-circle oj-icon-circle-border">
                 <span class="oj-icon-circle-inner">
                   <div class="demo-icon-circle-font oj-fwk-icon-calendar">
                   </div>
                 </span>
               </span>
oj-icon-xxs
oj-icon-xs
oj-icon-sm
oj-icon-md
oj-icon-lg
oj-icon-xl
oj-icon-xxl
 Sets the size of the icon. Possible sizes are xxs, xs, sm, md, lg, xl, xxl. Default size is md. Place on same span that contains oj-icon-circle. 
                 <!--Large Circle icon using icon font for image-->
                  <span class="oj-icon-circle oj-icon-lg">
                    <span class="oj-icon-circle-inner">
                      <div class="demo-icon-circle-font oj-fwk-icon-calendar">
                      </div>
                    </span>
                  </span>