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
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:
Modify the CSS to match OracleJET
We need to tweak the FontAwesome CSS files to point to the proper locations in your project.
JETQuickStart/css/libs/fa/font-awesome.css in NetBeans. Do an Edit >> Replace... and search for the text
../fonts/fontawesome, replacing it with the text
../../fonts/fontawesome. You should get 6 hits. Click Replace All.
Now do the same for the minified version of the file
JETQuickStart/css/libs/fa/font-awesome.min.css. If you open it right away in NetBeans, it will remember your Find/Replace strings and you can just click Replace All again.
Close and save both files.
This points the FontAwesome stylesheets in the right direction to find the actual font files in your project structure.
Link everything into your project
Now we need to tell the QuickStart project about the FontAwesome CSS files.
index.html file out of the Site Root by double-clicking on it. Find the line in the
<head> section just above the
override.css line (line 32 in my file). This is where we will insert the reference to the FontAwesome CSS file.
The easiest way is to grab the
font-awesome.min.css file in the Projects hierarchy with the mouse and drag it to the blank line you want to add it into. NetBeans will create the proper
<link ... > tag for you. You can add spacing and a comment if you like.
Modify the icons in your menubar code
Everything is in place to use the FontAwesome icons. Now we just need to know what style classes to use and where to put them.
If you are looking to swap out the menubar icons in the QuickStart project, you’ll find the icon style classes are defined in the
js/modules/header.js viewmodel. See down in the
appNavData definition (lines 92-117) that each menu entry is represented by an object, and each of those objects has a key for
iconClass: which is a string that gets passed into the header template and used for the icon styling.
The first entry in that
iconClass: string takes the form
demo-xxxxx-icon-24 (you can find the CSS that defines these classes in the
css/demo-alta-patterns-min file). We’re going to replace that portion of the style with FontAwesome style references.
You can pick the icon you want by perusing the FontAwesome cheatsheet. Drill down on your favorite icon and notice that the class names take the format
fa-iconname. We also need to add the
fa class to the mix, and I’ve found that playing with the sizes is necessary: I needed
fa-lg to make things look right in the QuickStart menubar.
So to swap out the People tab’s icon for something else, remove the
demo-education-icon-24 from line 101 of the
header.js and replace it with
fa fa-users fa-lg:
Revel in your new icons
You’re now using the FontAwesome icons in your menubar for the People tab:
You can now use FontAwesome styles anywhere in your view templates or even build up the same convention as in the QuickStart’s
header.tmpl.html files by passing them in as data-bound elements.
Or if you’re really handy with fonts, you could make your own custom gylphs and set them up similar to the way the QuickStart did, with only the few gylphs you want to include instead of the big FontAwesome files.