Here we will learn bootstrap glyphicons icons list with examples, change the style/color of bootstrap glyphicons, change the size of bootstrap glyphicons icons with examples.
Bootstrap provides over 250 glyphicons from the Glyphicons Haflings set. The bootstrap glyphicons are simple, modern and we can use it in buttons, text, forms, navigations, etc based on our requirements.
To setup Bootstrap Glyphicons we don’t need any script files just by adding one CSS file to our website we can use all Bootstrap icons in our applications.
To use Bootstrap Glyphicons in application please copy & paste the following CSS file into the <head> section of your website.
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet">
Once we add the above CSS file to our website the bootstrap CSS will be called to activate the Glyphicons font specific to the browser.
To use icons in the application we need to add glyphicon glyphicon-name CSS class to an inline element <i> or <span> tag to render icons from the web font. Here is a small example to show the user icon.
<i class="glyphicon glyphicon-user"></i>
Generally we use inline elements <i> or <span> to show bootstrap glyph icons. Following example shows how to use bootstrap icons in website.
<!DOCTYPE html>
<html>
<head>
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<i class="glyphicon glyphicon-glass"></i>
<i class="glyphicon glyphicon-euro"></i>
<i class="glyphicon glyphicon-time"></i>
</body>
</html>
If you observe the above example we added three icons glass, euro, and time. Now we will run and see the result.
Following is the result of the bootstrap glyphicon icons example.
We can change the style of bootstrap glyphicon icons like increasing the font size, color, etc. using CSS properties that would be like as shown following example.
<!DOCTYPE html>
<html>
<head>
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<i class="glyphicon glyphicon-camera"></i>
<i class="glyphicon glyphicon-camera" style="font-size:40px;"></i>
<i class="glyphicon glyphicon-camera" style="font-size:50px;color:blue"></i>
</body>
</html>
If you observe the above example we are changing the size of icons by defining font-size and changing the color of icons.
Following is the result of changing the style of bootstrap glyphicon icons.
In case if we want to change icons font size we can change to any size like 10px or 20px based on our requirements. The following example shows how to use different sizes for icons.
<!DOCTYPE html>
<html>
<head>
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<i class="glyphicon glyphicon-phone-alt"></i>
<i class="glyphicon glyphicon-phone-alt" style="font-size:40px;"></i>
<i class="glyphicon glyphicon-phone-alt" style="font-size:50px;"></i>
</body>
</html>
If you observe the above example we are changing the size of bootstrap glyphicon icons by defining font-size.
Following is the result of changing the size of the bootstrap glyphicon icons example.
This is how we can use bootstrap glyphicon icons in our applications based on our requirements.