Bootstrap Glyphicons Icons Introduction

  Total Views : 244
  Comments : 0
 
  Keywords : Bootstrap glyphicons icons example, How to add / use bootstrap glyphicons icons in application with example, Bootstrap glyphicons icons list with examples, bootstrap glyphicons examples

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 Glyphicons Icons

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.

Bootstrap Glyphicons Icons Setup

To setup Bootstrap Glyphicons we don’t need to 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 applicatio please copy & paste 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 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 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 small example to show user icon.

 

<class="glyphicon glyphicon-user"></i>

Bootstrap Glyphicon Icons Example

Generally we use inline elements <i> or <span> to show bootstrap glyph icons. Following example shows how to use bootstrap icons in website.

 

Live Preview

<!DOCTYPE html>

<html>

<head>

<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet">

</head>

<body>

 

<class="glyphicon glyphicon-glass"></i>

<class="glyphicon glyphicon-euro"></i>

<class="glyphicon glyphicon-time"></i>

 

</body>

</html>

If you observe above example we added three icons glass, euro and time. Now we will run and see the result.

Output of Bootstrap Glyphicon Icons Example

Following is the result of bootstrap glyphicon icons example.

 

Change Bootstrap Glyphicon Icons Style

We can change the style of bootstrap glyphicon icons like increasing font size, color, etc. using CSS properties that would be like as shown following example.

 

Live Preview

<!DOCTYPE html>

<html>

<head>

<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet">

</head>

<body>

 

<class="glyphicon glyphicon-camera"></i>

<class="glyphicon glyphicon-camerastyle="font-size:40px;"></i>

<class="glyphicon glyphicon-camerastyle="font-size:50px;color:blue"></i>

 

</body>

</html>

If you observe above example we are changing size of icons by defining font-size and changing color of icons.

Output of Bootstrap Glyphicon Icons Style Change

Following is the result of changing the style of bootstrap glyphicon icons.

 

Change Bootstrap Glyphicon Icons Size

In case if we want to change icons font size we can change to any size like 10px or 20px based on our requirements. Following example shows how to use different sizes for icons.

 

Live Preview

<!DOCTYPE html>

<html>

<head>

<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet">

</head>

<body>

 

<class="glyphicon glyphicon-phone-alt"></i>

<class="glyphicon glyphicon-phone-altstyle="font-size:40px;"></i>

<class="glyphicon glyphicon-phone-altstyle="font-size:50px;"></i>

 

</body>

</html>

If you observe above example we are changing the size of bootstrap glyphicon icons by defining font-size.

Output of Bootstrap Glyphicon Icons Size Change

Following is the result of changing the size of bootstrap glyphicon icons example.

 

This is how we can use bootstrap glyphicon icons in our applications based on our requirements. 

 Comments (0)

Be the first to give your valuable feedback

Leave a comment

  • Default Tutlane User