Tutorial ‘Glyphicons’ bootstrap

Now I want to share again how to explore the bootstrap framework, yesterday I also shared how to integrate our web templates with this bootstrap framework. If you forget to take a look at the previous article again.

Now I want to share the main components in Bootstrap. The main components provided by bootstrap are very many, including icons, dropdowns, buttons, input forms, pagination, and many more. So the first thing I want to share is the ‘Glyphicon’ icon component.

What’s the point of using this icon? The first reason we use the ‘Glyphicon’ icon is to make our website more efficient. We can use the available icons just by calling the class. We don’t need to put an image into assets, then call the image to be an icon. In addition, using the ‘Glyphicon’ icon will not consume a lot of resources.

Available Glyph

The following are the icons provided by the ‘Glyphicon’ icon

How to use?

Then how to use it? very easy. .

  1. Select the icon you want to use
  2. Take the class name for example ‘glyphicon glyphicon-plus’ for the ‘plus’ icon
  3. Put the class in your html tag like this
<!DOCTYPE html>
<html lang="en">
<head>
<title>Mencoba Component Bootstrap| UI UX First</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="assets/css/bootstrap.min.css">
</head>
<body>
<div class="container">
<div class="row">
<div class="col-xs-1" style="padding:20px; background-color:#eees;">
<span class="glyphicon glyphicon-user fa" aria-hidden="true"></span>
</div>
<div class="col-xs-1" style="padding:20px; background-color:#eees;">
<span class="glyphicon glyphicon-cloud fa" aria-hidden="true"></span>
</div>
<div class="col-xs-1" style="padding:20px; background-color:#eees;">
<span class="glyphicon glyphicon-plus fa" aria-hidden="true"></span>
</div>
</div>
</div>
</body>
</html>

If successful, the icon icon will appear as desired