To add icons in Html website is very easy, do these three things;
- Connect your PC to the internet
- Go to https://cdnjs.com/libraries/font-awesome
- Copy the link and include it at the head of your document.
then you can use any font awesome icon you want on your website.
See the step by step process below
The most popular icon providers are font-awesome and materialize.
We will be using font-awesome in this tutorial
One thing you should have in mind is that, just like your text content, icons are one of the content of every website.
Icon makes its easier to understand certain information been passed.
In this tutorial, we would be learning how to add icons in Html.
Adding the Html Structure
Html
assuming this is our simple html structure,
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
</body>
</html>Next, connect your PC to the internet and head over to https://cdnjs.com/libraries/font-awesome, you will be greeted with the cdnjs interface.
As at the time of making this tutorial, the current version is version 6.2.0, so do not be confused when you see a different version number, the steps are still the same.
use the first link as shown below
Copying The CDN Link From Font-Awesome
click on the angle bracket by the right of of the first link.
It will be copied and you can then include it at the head of your Html document as shown below
Adding the CDN Link To Your Html Code
at this point, your website is ready to display icons.
So to test it out, we can simple use some icon example to test if it is really working.
Html
add the following to your html
<a href="">
<i class="fab fa-facebook"></i>
facebook
</a>
<a href="">
<i class="fab fa-twitter"></i>
twitter
</a>
<a href="">
<i class="fab fa-instagram"></i>
instagram
</a>
<a href="">
<i class="fab fa-whatsapp"></i>
whatsapp
</a>
the output on your browser will look like what's shown below
hopefully, you get the same result as i did.
if you did not get the same result, please check if you copied the right link from https://cdnjs.com/libraries/font-awesome and you are connected to the internet.
this is so easy and straight forward, no hassle involved.
Remember the three things to do are ;
- Connect your PC to the internet
- Go to https://cdnjs.com/libraries/font-awesome
- Copy the link and include it at the head of your document.
then you can use any font awesome icon you want on your website.
why this is vey easy,
straight forward and recommended when deploying your website. it will not work if you are offline (no internet connection).
So when building your website, it is advisable to download the font awesome package and use it directly in your project.
there are two things you need,
Pingback: Display Shopping Cart Icon on Hover - codeharis
Pingback: How To Host Your Html Website Free on Netlify - codeharis
Pingback: Create A Responsive Accordion Using Html And Css - codeharis