AJAX-based Microsite: Google Fonts / FontAwesome
Introduction
Before moving onto activating jQuery on our websites, I would like to introduce two useful front-end libraries that may help your future projects. If you were part of the original CSDM 1N15 class, this should be a review for you.
Using Google Fonts
The challenge of using custom typefaces in websites is no longer relevant, as we now have a plethora of subscription-based services such as Typekit (https://typekit.com/) and Fonts.com (https://www.fonts.com/). As part of this exercise, we will focus on Google Fonts (https://fonts.google.com/).
Enter the Google Fonts website, and choose the typefaces you wish to use as part of your microsite. The website features a shopping cart-like interface that allows you to view all the selected typeface and customize what variations should be imported into the microsite:
As the instructions suggest, we can simply copy the <link> tag and paste into the <head> section in order to start using the typefaces. We can use "font-family" to specify the typefaces we just imported into the website.
Using FontAwesome icons
Inserting icons into our code was traditionally a time-consuming process, where we were expected to create individual images via Photoshop and implement using <img> tag. Font Awesome's innovative approach allows us to use vector-based icons as if they were part of a typeface.
The website's "Get Started" page (https://fontawesome.com/get-started) offers a copy-and-paste entry. Be sure to use the "free" version:
After successfully implementing the <link> tag, it is as simple as searching for an icon and copying the generated code:
Note that there is a HTML snippet that you can copy and paste into your microsite. You can also treat them as individual text characters and apply various text-specific CSS rules.
Screencast Recording
https://drive.google.com/open?id=1hBwhOFI0G3V9osZMbN_8V7qC_73OFCAh