1.3.5 Add Font Awesome Icons & Google Fonts

This document will demonstrate how to dind and add Google Fonts and FontAwesome Icons to a website.

Add LinkedIn, GitHub and Email Linked Icons

Find the following elements in initial.html

 <a href = "https://www.linkedin.com/"><img src = "" class = "contact-icon"></a>
 <a href = "https://github.com/"><img src = "" class = "contact-icon"></a>
 <a href = "email@email.com"><img src = "" class = "contact-icon"></a>

Set the src="" to the corresponding .svg file you have. For example,
```
 <a href = "https://www.linkedin.com/"><img src = "linkedin.svg" class = "contact-icon"></a>
```
Note: We have wrapped these images </img> in anchor tags so when someone clicks on the image they will be taken to another page.

Note: Notice the target="_blank" on the anchor tags. This makes the link open in another tab so the visitor doesn’t leave your website.

Note: You can change the links to your Github, your email and your LinkedIn.

Style the Icon’s Container

Find .contact-icon-container {} in between the <style></style> tags

Add the following code between the {}

 display: flex; /* Layout Model */
 justify-content: center; /* Flex Layout, Horizontally Center */
 margin: 10px 0px; /* Add space outside of container on top and bottom */

Style the Icons

Find .contact-icon {} in between the <style></style> tags

Add the following code between the {}

 height: 25px; /* Element Height */
 margin-right: 50px; /* Space between this element and element to the right */

Add Other Font Awesome Icons

Open Font Awesome
Search and select the icon you like
Click the download icon next to </> icon
Click and drag the file from your downloads to your folder where your initial.htmlis
Find where you want to add your icon and add <img src = "icon.svg">
You can add a class="some-class-name" and add styles to set the size of this icon and more
You can also wrap this <img> with an anchor <a></a> to make it clickable

Add Google Fonts

Open Google Fonts
Search and Click the font you like
Click The plus symbol on the right side of the style and weight of the font you like
When you have selected all the font weights and styles you like click the grid with the plus symbol in the upper right corner with tootip ‘View selected families’
Under ‘Use on the web’ Select <link>
Copy the <link> tags below
Paste the link tags in your initial.html between your <head></head> tags
You can now use the font according to the examples on the Gooogle Fonts Selected families page under ‘CSS rules to specify families’

Note: The font used in this example is imported from Google. It is called Montserrat.