The customization of our MyPhoto navbar is coming along nicely. We now have a nice scroll animation in place as well as a set of navbar items that update themselves based on the user's scroll position. However, we are not quite there yet. The items in our Profile drop-down menu still looks quite plain. Wouldn't it be nice if we could use icons to increase each drop-down menu item's readability? Adding icons to controls and menus helps draw attention to important functionality while clearly outlining a control's intended purpose.
When it comes to icons, a popular choice among web developers is the Font Awesome icon library ( https://fortawesome.github.io/Font-Awesome/) which is a free collection of over 500 icons that were made to be used with Bootstrap websites. Take a look at the following screenshot:
Figure 4.4: Examples of various Font Awesome icons.
To download the icon library, run a bower install as follows:
bower install components-font-awesome
Once the download completes...