How to Change the Size of Glyphicons

Solution with the CSS font-size property

If you need to change the size of glyphicons, use the CSS font-size property.

In this snippet, we’ll show some examples and explain them. Let’s start with an example, where we increase all the glyphicons and set their font-size to 50px.

Example of increasing all glyphicons:

<!DOCTYPE html>
<html>
 <head>
   <title>Title of the document</title>
   <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
   <style>
     body {
       background-color: #f5f5f5;
       margin: 0;
       padding: 0;
     }
     div i {
       margin: 5px 20px;
     }
     .glyphicon {
       font-size: 50px;
     }
   </style>
 </head>
 <body>
   <h1>Example</h1>
   <div>
     <i class="glyphicon glyphicon-home"></i>
     <i class="glyphicon glyphicon-picture"></i>
     <i class="glyphicon glyphicon-phone-alt"></i>
     <i class="glyphicon glyphicon-thumbs-up"></i>
   </div>
 </body>
</html>

In the example above, we specified the margin property for the <i> elements and also, styled the <body> element with the background-color, margin and padding properties.

Now, let’s increase only one glyphicon, among others.

Example of increasing only one glyphicon:

<!DOCTYPE html>
<html>
 <head>
   <title>Title of the document</title>
   <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
   <style>
     body {
       background-color: #f5f5f5;
       margin: 0;
       padding: 0;
     }
     div i {
       margin: 5px 20px;
     }
     .glyphicon.glyphicon-phone-alt {
       font-size: 35px;
     }
   </style>
 </head>
 <body>
   <h1>Example</h1>
   <div>
     <i class="glyphicon glyphicon-home"></i>
     <i class="glyphicon glyphicon-picture"></i>
     <i class="glyphicon glyphicon-phone-alt"></i>
     <i class="glyphicon glyphicon-thumbs-up"></i>
   </div>
 </body>
</html>

So, we set the font-size only on the icon that we want to increase.

Example of increasing and changing the color of only one glyphicon:

<!DOCTYPE html>
<html>
 <head>
   <title>Title of the document</title>
   <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
   <style>
     body {
       background-color: #f5f5f5;
       margin: 0;
       padding: 0;
     }
     div i {
       margin: 5px 20px;
     }
     .glyphicon {
       font-size: 30px;
     }
     .glyphicon.glyphicon-phone-alt {
       font-size: 60px;
       color: green;
     }
   </style>
 </head>
 <body>
   <h1>Example</h1>
   <div>
     <i class="glyphicon glyphicon-home"></i>
     <i class="glyphicon glyphicon-picture"></i>
     <i class="glyphicon glyphicon-phone-alt"></i>
     <i class="glyphicon glyphicon-thumbs-up"></i>
   </div>
 </body>
</html>