Adding FontAwesome to Oracle JET QuickStart by Paul Thaden


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: ( 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


Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s

This site uses Akismet to reduce spam. Learn how your comment data is processed.