Free Icons For Bootstrap and How to Use Icon Fonts with Bootstrap

When you work on your Bootstrap project, one of the situations you face that come under inevitables is icon fonts. The next thing you do is type ‘free icons for Bootstrap’ in Google search box. We hope that the search brought you in here.

For those who scratch their head, icon fonts are fonts that contain symbols instead of letters. That’s an important component in every web designing project.

Maybe you are aware that the Bootstrap had glyphicons library included till Bootstrap 3, but dropped in Bootstrap 4 for some reasons.

Some of us might turn to image icons for help. Well, image icons can never be a replacement. The first problem to kick in will be improper scaling. But, that couldn’t stop you from designing awesome web pages since that problem’s already found a variety of solutions. This article is about one such solution that would decorate your site with glyphs and animations without much ado.

Three Reason Why – Icon Fonts? Why Not Image Icons?

1) Icon fonts let you full control over themselves; manipulation of size, shape, and color.

2) You do not need an image editor like Photoshop to make changes to the icons that you need in case of image icons.

3) It doesn’t delay web page loading time and support all viewport sizes.

Well, the solution we were talking about is icon sets provided by several developers that are easy to implement in our projects. Our Bootstrap Icons set in focus is LineIcons, a free source of awesome icons that would be an ideal choice even for seasoned developers.

Four Reasons Why – LineIcons?

1) It is free and contains over 450 unique icons from various categories.

2) It is constantly getting updated, so you don’t have to worry about sticking to the same set of fonts forever.

3) It provides icons in two formats: Web icons and SVG. You can manipulate it as per your need.

4) 100% compatible with Bootstrap and any other CSS framework, it makes Bootstrap design modern and slick.

You can Download LineIcons or If you would like to use any other icon packs you can check this article about 20+ free icon packs. The tutorial is same for all icon packs, we are just demonstrating the process with LineIcons.

How to Use Icon Fonts with Bootstrap

Getting Started:

LineIcons provide a variety of free icons enough to build a complete website and 100% compatible with Bootstrap. These icons are appealing on all screen readers; no matter it’s a laptop, personal computer, tablet, or a mobile phone. Implementing the icon set in your project is quite simple.

Including with Bootstrap Project:

You can directly use the icon set by including the following snippet on your project header (after downloading and placing into your project directory). This will enable the usage of LineIcons CSS on your project, just like any other CSS linking.

<link href="your-project/LineIcons/LineIcons.min.css" rel="stylesheet">

Using with Bootstrap:

As you are going to use icons with Bootstrap, the method is same as HTML. Open your HTML file on an editor, use the icon class – which is present in the icons page also the cheatsheet html file comes with the download package. – in the following format (in the inline elements).

Example:

When you use an icon with bootstrap button:

Button Code:

<a class="btn btn-primary" href="icons"> View All Icons</a>

Extra Features: To manipulate the size of the icons, you’ve got size classes. LineIcons provide you with four different sizes: extra small, small, medium, and large. Look at the following example to learn how to change the size of the icons.

Another awesome stuff that comes free with LineIcons is its animation classes. It supports some of the cool effects like fading effect, burst effect, spin effect, etc. The following snippet would give you an idea on how to implement animation with the icon fonts in your project.

You can learn more with usage examples from their documentation page

You can reach the LineIcons’ official site to learn more about this awesome product and also to download the free Bootstrap icon fonts set right away. Happy designing!

Learn More/Download

Tags:

Share This Post