Transcript

Integrating Font Awesome (scalable vector icons)

Introduction to APEX 5 Lesson 5

 

Font Awesome, Navigation Entries and Lists

 

>> Tyson:  Some of you may have noticed that I have some icons over here on the left-hand side for my different links. One thing that is I truly enjoy about APEX 5.0 is that they are using something called Font Awesome. I’m going to navigate to a link.

 

[pause]

 

These are the Font Awesome icons. APEX is not using version 4.3, it’s currently using version 4.2, but if you want to leverage the Font Awesome icons or you want to customize and have different Font Awesome icons in your application, one thing that you could do is if you have an idea of the icon that you’re looking for, like for instance, I’m going to type “gear” and notice that it comes up with – it’s actually called cog but there are some aliases here for that particular icon. I’m going to navigate to this icon.

 

Since APEX is using Font Awesome, all I need to do is I just need to copy this class. This is a CSS class that I can leverage in APEX. I’m just going to copy this cog (fa-cog) and now I’m going to go to my builder. I’m going to add the cog to this employees item here, this employees list item.

 

[pause]

 

To do that, I’m going to add up my application, I’m going to go to my shared components, I’m going to go to my navigation menu. And here I have my desktop navigation menu. This is that left-hand menu. I’m going to go to my employees item or the employees entry in the navigation menu. Here there’s ability to add image or class and I’m just going to paste the Font Awesome cog icon. Apply changes.

 

[pause]

 

Now if I refresh my application you can see that I have a cog powered by Font Awesome. The great thing about using the Font Awesome stuff is that it scales very well. So here you can see this is the same class at a very large size all the way down to the default smaller size that we see here.

 

[pause]

 

Here’s actually some code for you to copy. You can use the “I” tag and the class provided here to get the Font Awesome icons.

 

Now one thing that you may have also noticed is that tabs aren’t along the top anymore. There are tabs that are actually listed along the left-hand side. I actually shouldn’t be calling them tabs anymore because they are not. The option to use or using tabs as the primary navigation element at your applications is an option now. So I believe now it’s just called navigation entries and in this case I’m actually using a list.

 

I highly encourage you to move away from tabs and use lists. The reasoning for that is that lists are more flexible and there are some works that you may have encountered when using tabs that you can just avoid with lists. One of which being just kind of as an FYI is that when you click on a tab, it’s actually submitting the page. But you don’t always want to submit the page when you’re just trying to navigate from one page to the next. With lists entries, you’re strictly just navigating, just linking from one page to the next.

 

Copyright SkillBuilders.com 2017

×
Free Online Registration Required

The tutorial session you want to view requires your registering with us.

It’s fast and easy, and totally FREE.

And best of all, once you are registered, you’ll also have access to all the other 100’s of FREE Video Tutorials we offer!

 

×