Set the size of the icons in HTML

HTML Web Development Front End Technology

In this article, we are going to discuss how to set the size of the icons in HTML.

An icon is a symbol that represents a specific action on a webpage. The Icon Fonts contain symbols and glyphs. There are several icon libraries(fonts) that provide icons and can be used on HTML webpages.

The prominent icon fonts frequently used by the web developers are Font Awesome, Bootstrap Glyphicons, and Google’s material icons.

Font Awesome − This library is completely free, for both commercial and personal use. This Font provides us with 519 free scalable vector icons. These can be easily customized and originally they are developed by Bootstrap.
Bootstrap Glyphicons − This is a library of monochromatic icons available in raster image formats, vector image formats, and as fonts. It provides over 250 glyphs in font format. You can use these fonts in your web projects, but they are not free.
Google’s material icons − There are 750 icons designed under "material design guidelines" which google is providing as a set and these are known as Material Design icons. These icons are supported in almost every web browser. To use these icons, you have to load font (library) material-icons.

Let’s use the above-mentioned icon font libraries in the following examples below.

Font Awesome Icons

Example

In the example below,

First, we have loaded the Font Awesome library.
Then we used one of the icons and added the name of that icon class to the HTML element within the <body> tag.
Then we increased the size of the icon by defining its size using CSS and using it along with the class name.
We have declared the size as 100px.


<html>
<head>
   <title>Set the size of the icons in HTML</title>
   <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.3.0/css/font-awesome.min.css">
   <style>
      i.size {
         font-size: 100px;
      }
   </style>
</head>
<body>
   <h2>This is a Font Awesome Icon</h2>
   <p>We have set the size of this icon to 100px.</p>
   <i class="fa fa-inr size"></i>
</body>
</html>

As we can see in the output, we have used the icon of Indian currency and defined its size by using CSS.

Google Material Icons

Example

In the example below,

We have loaded the material icons library.
Then we used one of the icons and added the name of that icon class to the HTML element within the <body> tag.
We have used an icon named traffic because that belongs to the action category.
Then we increased the size of the icon by defining its size using CSS and using it along with the class name.


<!DOCTYPE html>
<html>
<head>
   <title>Set the size of the icons in HTML</title>
   <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
   <style>
      i.size {
         font-size: 150px;
      }
   </style>
</head>
<body>
   <h2>This is a Google Material Icon</h2>
   <p>We have set the size of this icon to 150px.</p>
   <i class="material-icons size">traffic</i>
</body>
</html>

As we can see in the output, we have used the icon of traffic lights and defined its size by using CSS.

Bootstrap Glyphicons

Example

In the example below,

First, we have loaded the Bootstrap Glyphicons library.
Then we used one of the icons and added the name of that icon class to the HTML element within the <body> tag.
In the example, we have used an icon named tree and its class name is tree-deciduous.


<!DOCTYPE html>
<html>
<head>
   <title>Set the size of the icons in HTML</title>
   <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
   <style>
      i.mysize {
         font-size: 100px;
      }
   </style>
</head>
<body>
   <h2>This is a Bootstrap Glyphicons Icon</h2>
   <p>We have set the size of this icon to 100px.</p>
   <i class="glyphicon glyphicon-tree-deciduous mysize"></i>
</body>
</html>