Developer Partner Community

  • April 9, 2016

Adding FontAwesome to Oracle JET QuickStart by Paul Thaden

Juergen Kress
PaaS Partner Adoption

clip_image002NetBeans 8.1 has a plugin for Oracle JET that makes it absolutely simple to create a project modeled off the Oracle JET QuickStart template. Just choose File >> New Project... >> HTML5/JavaScript >> Oracle JET QuickStart Basic. Give it a name and a location, click Finish, then click the Run Project button.

You should be looking at a three-column, responsive, single-page app with a menubar that swaps out the content in the middle mainContent area. Notice those icons on the menubar for Home, People, Library, etc.:

Those icons come from a custom font named App_iconfont.woff in the /css/fonts/ directory. If you open that font up, you’ll find that it only includes about 10 custom glyphs. What if you need different icons in your menubar?

We can add the awesome FontAwesome project to our QuickStart project and use their myriad of icons in our own menubar.

Get the FontAwesome files

First download the latest zip file from the main FontAwesome page. I’m using version 4.5.0 for this lab.

Unzip this file and then pluck out the resources to copy into your JET QuickStart folder hierarchy. Copy the font files in font-awesome-4.5.0/fonts/ to JETQuickStart/css/fonts/. Next, copy the CSS files in font-awesome-4.5.0/css to a newly-created directory at JETQuickStart/css/libs/fa/. Your project should look like this in NetBeans: Read the complete article here.

WebLogic Partner Community

For regular information become a member in the WebLogic Partner Community please visit: http://www.oracle.com/partners/goto/wls-emea ( OPN account required). If you need support with your account please contact the Oracle Partner Business Center.

Blog Twitter LinkedIn Forum Wiki

Technorati Tags: WebLogic,WebLogic Community,Oracle,OPN,Jürgen Kress

Be the first to comment

Comments ( 0 )
Please enter your name.Please provide a valid email address.Please enter a comment.CAPTCHA challenge response provided was incorrect. Please try again.