You are currently viewing Add Flat Icons to Your Website in Simple Steps
  • Post category:HTML

Add Flat Icons to Your Website in Simple Steps

How to Add Icons to Webpage

  • Introduction
  • What is an icon library?
  • how to add free HTML icons?
  • What are the benefits of using an icon library?

Introduction

Hi Guys, In this article you will see how to add free html icons on your webpage and icons library. In order to use icons in your page you’re need to use a library such as font awesome or flat icon. You will learn how to use these libraries on your project. So, you can make a better decision for your project.

What is an icon library?

An icon is a graphic representation of thing, essentially it’s a small descriptive picture. The icons come in many different shapes. The icon library is already storing icons code in a library, that can be used to install that library in our project. There are many icons library are available in browser and the most commonly using is Font awesome icon, flat icon. They are simply work of copy and paste the code. We can creating an icon in CSS can be difficult and instead you can create your favorite icon using an icon library like this. Using icon libraries you will reduce your time and working hours.

How to add free HTML icons

Font Awesome :

<html>
<head>
<title>Font-Awesome</title>
<script src="https://kit.fontawesome.com/c6e71cff64.js"
 crossorigin="anonymous"></script>
<style type="text/css">
.fa-brands{
font-size: xx-large;
} 
</style>
</head>
<body>
<i class="fa-brands fa-linkedin"></i>
</body>
</html>
  1. Go to font awesome website. Here you will see the current version of the available version of 6.1.1.
  2. Click start for free and here it is asking for you email id. Enter your E-mail ID and click send kit code.
  3. You will receive the email from font awesome. And Click the conform button.
  4. Enter your new password and set up your account. Once you will complete your account creation, you will be redirected to the Font Awesome Welcome page.
  5. Copy the font awesome scripted code and come back to your html file paste the script between the <head> tag.
  6. Now, you can add any icon on the web page..
  7. Back to the font awesome website. Go to icons section and search your icon name.
  8. Select and click the free version icon. Click here to copy the HTML code snippet.
  9. 9. Return to the HTML file and paste the code snippet anywhere in the <body> tag.
  10. Now save and see your page, you can see the icon.
  11. 11.You can style your icon using the class name.
READ ALSO  Step by step guide to set Input textbox size with Examples

Flat icon:

The flat icon is one of the best icon library and many developers using flat icons.

<html>
<head>
<title>Flat-Icon</title>
</head>
<body>
<img src="C:\Users\ADMIN\Downloads\like.png">
</body>
</html>
  1. Go to flaticon website.
  2. Search your icon name in search bar.
  3. Download the icon in any format (svg or png).But svg format is premier pack. You can also download in png format.
  4. Add an <img> in the body section. And you must specify your icon path as the SRC attribute.
  5. You can see, the icon will be shown in your site.

Icon ify Design:

<html>
<head>
<title>Iconify-Design</title>
<script src="https://code.iconify.design/2/2.2.1/iconify.min.js"></script>
</head>

<body>
<span class="iconify"
data-icon="openmoji:annoyed-face-with-tongue" 
data-width="100" data-height="100"></span>
</body>
</html>
  1. Go to Iconify Design and search your icons in the search box.
  2. Select your icon or emojis and scroll down.
  3. Make sure you select the HTML code
  4. The best feature of this site is that you can style the icon right here. Automatically style code will be added to your HTML span code
  5. Copy the HTML span tag code and past anywhere in the body tag.
  6. And copy the SVG java script code to paste it in Head section.
  7. Now, you can see your icons will be shown in the page.

Ion icons:

<html>
<head>
<title>Font-Awesome</title>
<script type="module"
 src="https://unpkg.com/ionicons@5.5.2/dist/
ionicons/ionicons.esm.js"></script>
<script nomodule src="https://unpkg.com/ionicons@5.5.2/dist/
ionicons/ionicons.js"></script>
</head>
<body>
<span style="font-size: 4rem;"><ion-icon name="airplane-outline">
</ion-icon>
</body>
</html>
  1. Go to the ionicons usage page and copy the installation script code, paste it in the head section.
  2. And search any of the icons that you want.
  3. Select and click on the icon and their code will be displayed below.
  4. Copy the code and past it in the HTML <body> tag.
READ ALSO  Easy Way to Change Color of Specific Word in HTML

Google Font Material icon:

<link href="https://fonts.googleapis.com/css?family=Material+Icons|Material+Icons+Outlined|Material+Icons+Two+Tone|Material+Icons+Round|Material+Icons+Sharp" rel="stylesheet">
<html>
<head>
<title>Font-Awesome</title>
<link href="https://fonts.googleapis.com/css?family=Material+Icons|Material+Icons+Outlined|Material+Icons+Two+Tone|Material+Icons+Round|Material+Icons+Sharp" rel="stylesheet">
</head>

<body>
<span class="material-icons-outlined">
fingerprint
</span>
</body>
</html>
  1. Copy the above code and paste on your HTML head tag.
  2. Go to google font and click “Icons”.
  3. Make sure you select the “material icon” option.
  4. And select your icon category (action, communication).
  5. Choose anyone of these option: outlined, rounded, filled, sharp and two tone anywhere.
  6. Select your icon, copy the span tag code and paste it in your HTML body section.

Benefits of using an icon library?

  • Reduce your time and work hours.
  • Use the easy way to copy and paste.
  • It is easily customizable, manageable and extensible.
  • You can also modify the icons.
  • Styling the icons using CSS.

Leave a Reply