InterviewSolution
Saved Bookmarks
InterviewSolution
| 1. |
How we can use Glyphicons in Bootstrap? |
|
Answer» Bootstrap has around 260 glyphicons, which can be used on any website. For Bootstrap, these ICON fonts are available for free. Let us now see how we can use Glyphicons on our website: Under the Bootstrap folder, which you MAY have downloaded to work with Bootstrap, a “fonts” folder can be SEEN. The same folder has all the icons. Every Glyphicon has a name, which you need to use as shown below: <span class = "glyphicon glyphicon-name"></span>Set the name of the glyphicon under “gplyphicon-name”: <span class = "glyphicon glyphicon-user"></span>You can set the icon in a button as well as shown below: <button type = "button" class = "btn btn-primary btn-sm"> <span class = "glyphicon glyphicon-user"></span> User </button>Here is an example that shows how to add icons: <!DOCTYPE html> <html lang="en"> <head> <title>Bootstrap Example</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> </head> <body> <div class="container mt-3"> <h2>Glyphicons</h2> <p>Working with Glyphicons in Bootstrap:</p> <button type = "button" class = "btn btn-primary btn-sm"> <span class = "glyphicon glyphicon-user"></span> User </button> <button type = "button" class = "btn btn-primary btn-lg"> <span class = "glyphicon glyphicon-search"></span> Search </button> </div> </body> </html>The output displays the icons in a button: |
|