Using icons with CSS


Icons are used to add visual representation to the text. They are used to make the text more attractive and appealing. Icons are used in many websites to make the website more attractive and user-friendly.

The icon is a comprehensible symbol that is used to display something in the form of a sign or symbol on the computer screen.

Icons are available in many formats like SVG, PNG, JPG, etc. In this section, we will learn how to use icons in our website using CSS.

Here are some examples of icons:

Home
User
Mail
Phone
Search
Cart
Heart
Star

How to add icons

To add icons to the webpage you need to use the icon library.

These icon libraries create icons using CSS so that users can add other CSS properties to it too like color, shadow, size, etc.

These icons are embedded in webpage by using HTML tags like <i> or <span> tag with class attribute.

Here are some examples of icon libraries that you can use:

  1. Font Awesome
  2. Google Icons
  3. Bootstrap Icons

1. Font awesome icons

Font Awesome is a free icon library that is used to add icons to the website. It is a very popular icon library that is used by many developers.

To use font-awesome icons you first need to add the font-awesome library to your website using CDN.

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.2.0/css/all.min.css">

Note: You can also download the font-awesome library and add it to your website.

Every icon in the font-awesome library has a unique class name which is used to add that icon to the webpage.

For example, to add the home icon to the webpage you need to use the fa-home class.

You need to check the icon library to know the class name of the icon you want to add.

Example

<!DOCTYPE html>
<html>

<head>
  <meta charset="UTF-8">
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.2.0/css/all.min.css">
  <title>CSS icon - Font Awesome</title>
</head>

<body>
  <h1>Created icons using font awesome library.</h1>
  <p><i class="fa fa-book"></i> - BOOK</p>
  <p><i class="fa fa-anchor"></i> - ANCHOR</p>
  <p>you can add class like - fa-2x,fa-3x to increase the size of icon.</p>
  <p><i class="fa fa-search fa-2x"></i> - SEARCH (2x)</p>
  <p>You can add color to icons using CSS.</p>
  <p><i class="fa fa-heart" style="color:red"></i> - HEART</p>
</body>

</html>
Try it


2. Google icons

To use google icons you first need to add the google icons library to your website using CDN.

<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">

Visit the google icons website and click on the icon you want to add to the webpage. You will see the HTML code that you need to add to the webpage to add that icon.

Example

<!DOCTYPE html>
<html>

<head>
  <meta charset="UTF-8">
  <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
  <title>Material Icons</title>
</head>

<body>
  <h2>Created icons using Google font icons library.</h2>
  <div style="text-align:center">
    <i class="material-icons">home</i>
    <i class="material-icons">attachment</i>
    <i class="material-icons" style="font-size:2.5em">search</i>
    <i class="material-icons" style="color:red">favorite</i>
    <i class="material-icons" style="color:cyan">computer</i>
  </div>
</body>

</html>
Try it

3. Bootstrap icons

To use bootstrap icons you first need to add the bootstrap icons library to your website using CDN.

Then use the appropriate class name to add the icon to the webpage.

Here is an example of how to add bootstrap icons to the webpage.

Example

<!DOCTYPE html>
<html>

<head>
  <meta charset="UTF-8">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  <title>Bootstrap</title>
</head>

<body>
  <h1>Created icons using Bootstrap icons library.</h1>
  <div style="text-align:center">
    <i class="glyphicon glyphicon-home" style="color:blue;font-size:1.5em"></i>
    <i class="glyphicon glyphicon-user" style="font-size:2em"></i>
    <i class="glyphicon glyphicon-remove" style="font-size:2.5em"></i>
    <i class="glyphicon glyphicon-envelope" style="color:red;font-size:3em"></i>
    <i class="glyphicon glyphicon-cloud" style="color:lightblue;font-size:3.5em"></i>
  </div>
</body>

</html>
Try it