Few popular web icons

Some of the icons like Font awesome are already popular in the world of internet.

All of them require their CSS file setup under <head> tag of the html file first. There are various ways, however adding CSS CDN links would be the easiest way of setup.

Font awesome

CSS setup

  • Visit the website, scroll down and locate Using CSS.
  • Copy the whole line as below and paste under <head> tag as you do for Bootstrap CSS.
    <link rel="stylesheet" href="path/to/font-awesome/css/font-awesome.min.css">

Bootstrap 5 icons

CSS setup

  • Visit the website, scroll down and locate CDN under Install.
  • Copy the whole line as below and paste under <head> tag as you do for Bootstrap CSS.
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.1/font/bootstrap-icons.css">

Google material icons

CSS setup using via Google Fonts

  • Visit the website, scroll down and locate Setup Method 1. Using via Google Fonts.
  • Copy the whole line as below and paste under <head> tag as you do for Bootstrap CSS.
    <link href="https://fonts.googleapis.com/icon?family=Material+Icons"
              rel="stylesheet">

The easiest way to set up icon fonts for use in any web page is through Google Fonts. All you need to do is include a single line of HTML:

Box icons

CSS setup

  • Visit the website, scroll down and locate Usage as a Font.
  • Copy the whole line as below and paste under <head> tag as you do for Bootstrap CSS.
    <link href='https://unpkg.com/boxicons@2.1.4/css/boxicons.min.css' rel='stylesheet'>

Web icons are an integral part of user interface (UI) design and are commonly used to improve the visual appeal and usability of websites and web applications.

Some examples:

How to use Font awesome?

Font Awesome is a popular icon set and toolkit that provides a vast collection of scalable vector icons that can be easily customized and integrated into various web projects.

Once you setup CSS of Font awesome icons, you can start looking for your icons, copy the code of that particular icon and paste in the html document.

<link rel="stylesheet" href="path/to/font-awesome/css/font-awesome.min.css">

Once you copy the CSS link code under <head> tag of your html page, look for icons. If you see, PRO associated with that icon, that is paid version. You can have a look an icon without PRO.

Below is the exampel of code of an information icon.

<i class="fa-solid fa-circle-info"></i>

Find Font awesome icons »

Explore

Navigate

Recently added