What are glyphicons in Bootstrap ?
Bootstrap provides set of graphic icons, symbols and fonts called Glyphicons. Some Glyphicons like Home icon, User icon, Lock icon, etc. Generally, Glyphicons are icon fonts which you can use in your web projects. Bootstrap includes 260 glyphicons. These glyphicons used for web project from Bootstrap Glyphicons Halflings Set. Glyphicons Halflings are not available for free of cost, but their creator has made them available for Bootstrap free of cost.
Attention reader! Don’t stop learning now. Get hold of all the important HTML concepts with the Web Design for Beginners | HTML course.
- To understand more effectively and easily in web projects.
- Used for some texts, forms, buttons, navigation, and etc.
- To give effective and authentic look of any web project.
- To Define anything using it , can easy.
Now let’s see how to use glyphicons in Bootstrap
Approach: To use the Glyphicons icon in Bootstrap, use the following code just about anywhere in your code. Leave a space between the icon and text for proper padding like:
<span class = "glyphicon glyphicon-search"></span>
Include Bootstrap3 and jQuery CDN into the <head> tag before all other stylesheets to load our CSS.
<link rel=”stylesheet” href=”https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css”>
Example 1: In this example, we will see glyphicons in bootstrap and how to use it along within a webpage.
Example 2: In this example, we will use glyphicons along with buttons with different buttons size.