Due to the Honor's Assembly, we may have a shortened class today.
Today, we are going to backtrack today and add in some HTML Icons! This was something we never got to explore previously!
Read each step carefully and follow along:
1. Open up your website in Chrome AND in Notepad
(You need to open the Notepad program first, then choose File and then Open to locate your
website file. Make sure you set it to view ALL files, not just Text files)
2. In the <head> section of your website, paste the following code:
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.0/css/all.css" integrity="sha384-lZN37f5QGtY3VHgisS14W3ExzMWZxybE1SJSEsQp9S+oqd12jhcu+A56Ebc1zFSJ" crossorigin="anonymous">
Pasting in the code above will allow your website access to all of the icons featured on the
Font Awesome website.
3. Visit Font Awesome to find Icons that you would like to use in your website!
(Make sure you set the parameters to "Free" on the left side. Not all icons are available unless you pay for an account.)
4. When you find an Icon you want to use, click on it. It will provide you with a line of HTML code to copy.
5. Now, in the body section (where ever you want to put them) paste in the HTML code that you copied from the website.
When you refresh your website page, your icon should appear! If it doesn't double check that you have followed the steps correctly and also copied the HTML icon link correctly.
REMINDER:
The code from Step 2 should be pasted in your <head> section of your website. NOT within the <style> or <script> tags. Adding in Icons is just HTML, not CSS or JavaScript.
The code that you copy from the website after selecting your icon can be pasted anywhere you want them to be placed in the <body> section of your website! There are literally hundreds of icons to choose from so put in a few that are interesting for you!
Today, we are going to backtrack today and add in some HTML Icons! This was something we never got to explore previously!
Read each step carefully and follow along:
1. Open up your website in Chrome AND in Notepad
(You need to open the Notepad program first, then choose File and then Open to locate your
website file. Make sure you set it to view ALL files, not just Text files)
2. In the <head> section of your website, paste the following code:
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.0/css/all.css" integrity="sha384-lZN37f5QGtY3VHgisS14W3ExzMWZxybE1SJSEsQp9S+oqd12jhcu+A56Ebc1zFSJ" crossorigin="anonymous">
Pasting in the code above will allow your website access to all of the icons featured on the
Font Awesome website.
3. Visit Font Awesome to find Icons that you would like to use in your website!
(Make sure you set the parameters to "Free" on the left side. Not all icons are available unless you pay for an account.)
4. When you find an Icon you want to use, click on it. It will provide you with a line of HTML code to copy.
5. Now, in the body section (where ever you want to put them) paste in the HTML code that you copied from the website.
When you refresh your website page, your icon should appear! If it doesn't double check that you have followed the steps correctly and also copied the HTML icon link correctly.
REMINDER:
The code from Step 2 should be pasted in your <head> section of your website. NOT within the <style> or <script> tags. Adding in Icons is just HTML, not CSS or JavaScript.
The code that you copy from the website after selecting your icon can be pasted anywhere you want them to be placed in the <body> section of your website! There are literally hundreds of icons to choose from so put in a few that are interesting for you!