1. Glyphicons Protein
2. Glyphicon Profile
3. Glyphicons Pro
4. Glyphicons Promo Code
5. Glyphicons Products
6. Glyphicons Prostate

Here we will learn bootstrap glyphicon icons list with example and different types of bootstrap glyphicon icons like earphone, user, search, remove, chevron, audio, video, play, edit, eject, share, font, bold, italic, etc. with examples.

Bootstrap Glyphicon Icons

Bootstrap includes 260 glyphs from the Glyphicon Halflings set. Glyphicons Halflings are normally not available for free, but their creator has made them available for Bootstrap free of cost. As a thank you, you should include a link back to Glyphicons whenever possible. Use glyphicons in text, buttons, toolbars, navigation, or forms. Glyphicons Pro Icon Set Download Torrent. Glyphicons Vector Line Icons. Category: Stock Graphic, Icons. CreativeMarket Glyphicons Vector Line Icons 882138.

Bootstrap provides more than 250 glyph icons which are user, cloud, envelope, pencil, film, list, ok, zoom in / out, trash, home, road, download, refresh, etc.

The following table shows the list of glyphicon icons available in bootstrap.

Glyphicons Protein

If you are searching for some Bootstrap icons you should continue reading because in this article I’ve put together a list (and I’ll continue updating it) with the best free font icons to use with this framework. As you know font icons are a standard in web design these days for a long series of advantages: they are easy to use, they are lighter than using images, being vectors they can be scaled at any size and so are suitable to use in Retina displays, etc.

Integrating these icons in your Bootstrap project is very easy: all you have to do is download the package, add the files to your project, include the CSS file and start using the chosen icons in your HTML. In this post, for every icon set, after a short description, I also explain how to use them. There are also other ways (more advanced) of using these type of icons that you can learn in their documentation if interested.

Sometimes you will need more than one icon package in a website. For example, I’ve imported 2 different font icon sets in some of my Bootstrap templates, like Jalia and Trilli Bi, using different icons from each set. You can do so very easily with these icon packs. So, let’s begin:

1. Glyphicons Halflings

The first icon set I’ve included in this list is called Glyphicons Halflings and it’s already included in Bootstrap when you download it (the compiled version, from the official site). This set contains 200 font icons from the Glyphicon Halflings set that are normally not free, but their designer has made them available for free to use with Bootstrap. We say him thanks by including a link to the Glyphicons site!

So, if your project doesn’t need a big library of icons but just some icons here and there, you can use this set that is integrated in Bootstrap and keep your website or project fast and lightweight without including other files.

How to use them

You can find examples of how to use the Glyphicons in the Bootstrap documentation. Here is a basic example of how you can add an icon in your HTML:

2. Font Awesome

Font Awesome comes with 479 vector font icons (in version 4.2.0) from various categories completely free, of course, that can be used very easily with Bootstrap. You’ve probably heard of this icon set as it’s used in a lot of websites around the web (probably too much). However, its ease of use and the number of icons offered that can cover almost every project, make it very convenient and a real time-saver. I use this icon font in a lot of my templates.

Font Awesome homepage:http://fortawesome.github.io/Font-Awesome/

How to use Font Awesome

There are some ways of integrating Font Awesome in your project explained in the “get started” page.

The easiest way

The easiest way is to use the Bootstrap CDN with a single line of code without downloading anything. Just paste this code in the “head” section of your HTML:

Another method

Another method (which I prefer) is using the default Font Awesome CSS with the default Bootstrap CSS.

1. Download and copy the “font-awesome” directory into your project.
2. Add the link to the “font-awesome.min.css” file in the “head” section of your HTML.

There are also some other ways to insert Font Awesome in your project as you’ll see in the “get started” page.

Once integrated, you can learn how to use it in your HTML from the “examples” page. Here is a simple example:

Now just style the icon with CSS like you would do with fonts. Change font-size, color, text-shadow as you like.

3. Elegant Icon Font

The Elegant Icon Font comes with 360 font vector icons, completely free to use, made by the guys at Elegant Themes. These icons have been optimized for 16 pixels and all multiples of 16px (32px, 64px, etc). The result is pixel-perfect details and crisp, beautiful graphics on any display, including Retina displays.

This is one of my preferred icon sets and I’m using it a lot in my latest Bootstrap templates. As you’ll see, it’s very easy to integrate in Bootstrap websites.

Glyphicon Profile

Elegant Icon Font homepage:http://www.elegantthemes.com/blog/resources/elegant-icon-font

How to use the Elegant Icon Font

Including this font in a Bootstrap project is very simple:

1. Download the package and extract it.
2. In the “elegant_font” folder you’ll find a subfolder called “HTML CSS”. Copy it into your project (maybe rename it if you want).
3. Add the link to the “style.css” file in the “head” section of your HTML.

Once included, you can add the icons in your HTML and style them with CSS:

For example:

Here is how I’ve used these icons in the “Features” section of the Trilli Bi template:

The HTML:

The CSS:

4. Typicons

Typicons comes with 336 free vector icons, pixel perfect and multi-purpose, embedded in a webfont that can be easily used in your Bootstrap user interfaces for the web or for native applications.

Typicons homepage:http://typicons.com

How to use Typicons

To include the Typicons set in your Bootstrap project is pretty easy. In the Typicons homepage is clearly explained how to use the icons (in different ways) and you can also learn how to create your custom set of icons, including only the icons you need to make your project lighter and faster.

A simple way is to:

1. Download the font files and minified CSS on the GitHub page here.
2. Copy them in your project folder.
3. Include the “typicons.min.css” file in the head section of your HTML.

Now add the icons in your HTML file where you want and style them with CSS:

You can find the appropriate class names for all icons in the Typicons homepage.

5. Meteocons

If you are designing a Bootstrap site or application that needs some Weather icons at some point, the Meteocons set is for you. It contains 40+ icons, completely free to use in commercial and personal projects and customize as you like, available in different formats: PSD, CSH, EPS, SVG, Desktop font and Web font.

Adding these icons to your Bootstrap project is very simple as you will see in the Meteocons homepage.

Meteocons homepage:http://www.alessioatzeni.com/meteocons

6. Open Iconic

Open Iconic is a free open source icon set containing 223 icons in SVG, Web font and raster formats. As its creators say, Open Iconic is “hyper-legible”, designed to be legible down to 8 pixels. This icon set has also a very small file size making your sites load fast.

Open Iconic comes with ready-to-use fonts and stylesheets that work with your favorite frameworks. In our case it works perfectly with Bootstrap.

Open Iconic homepage:https://useiconic.com/open

How to use Open Iconic

To include this icon set in your Bootstrap project is very easy:

1. Download the package from the homepage.
2. Copy the folder into your project.
3. Include the “open-iconic-bootstrap.css” file in the head section of your HTML.

Glyphicons Pro

Now add the icons in your HTML files and style them with CSS:

You can find the appropriate class names for all icons in the Open Iconic homepage (link above).

7. Elusive Icons

Elusive Icons comes with 299 free icons, open-source, available as a Web font and as vector SVG.

Elusive Icons homepage:http://press.codes/downloads/elusive-icons-webfont

Glyphicons Promo Code

How to use Elusive Icons

Using Elusive Icons with Bootstrap is simple: you can use the CSS method or the LESS method. For the CSS method:

1. Download the package and copy the “fonts” directory into your project.
2. Copy the “elusive-webfont.css” file into your project.
3. Open the “elusive-webfont.css” file above and edit the font urls to ensure they point to the right place.
4. Include the “elusive-webfont.css” file in the head section of your HTML.

Now add the icons to your HTML code and style them with CSS as you like:

You can find all the icons class names in the Elusive Icons homepage (link above).

Conclusion

That’s all. Here you have the best free font icons to use with Bootstrap that I could find. I hope these icons will be useful to you and will help save some time in your design and development work. Also, I will update this list as soon as I find new icon sets. If you find or create a new set and think would be appropriate for this list, let me know so I can include it here.

Stay Updated

Glyphicons Products

Subscribe to the Azmind Newsletter and I’ll update you as soon as I release a new WordPress Theme, Bootstrap Template, Tutorial or other Freebie:

Glyphicons Prostate

To learn how we use your data when you sign up to our newsletter, read our Privacy Policy here.