Thursday, March 24, 2016

Using FontAwesome and Glyphicons with Oracle JET

Oracle JET includes an excellent list of common icons in the Framework Images Recipe. To use one, add the oj-fwk-icon and icon specific class to any element (<i> is a common element). For example:

<i class="oj-fwk-icon oj-fwk-icon-magnifier"></i>

The Oracle JET Cookbook contains great examples of using the oj-fwk-icons with common Oracle JET components. Sometimes, however, I find I need more icons. Two of my favorite icon libraries are FontAwesome and Glyphicons (the Bootstrap ones). To use either of these libraries, first include the library's CSS. Second, replace the oj-fwk-icon and oj-fwk-icon-* classes with the appropriate library specifc class. For example, to use the FontAwesome magnifier, use fa fa-search. I put together a very short jsFiddle showing how to use FontAwesome with some of the more common Oracle JET elements such as ojButton and ojMenu:

No comments:

Post a Comment