GrayGrids Team
in Tutorial
Updated on: 9/25/2024
Free Icons For Bootstrap and How to Use Icon Fonts it
When you work on your Bootstrap project, icon fonts are one of the situations you face that come under inevitables. The next thing you do is type ‘free icons for Bootstrap‘ in the Google search box. We hope that the search brought you in here.
For those who scratch their head, icon fonts contain symbols instead of letters. That’s an important component in every web designing project.
Maybe you know Bootstrap had the glyph icons library included until Bootstrap 3 but dropped it in Bootstrap 4 for some reason. And now, with Bootstrap 5 continuing this journey, the landscape has evolved even further.
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 has already found various solutions. This article is about one such solution that would decorate your site with glyphs and animations without much ado.
Three Reasons Why – Icon Fonts? Why Not Image Icons?
1) Icon fonts give you full control over their size, shape, and color manipulation.
2) You do not need an image editor like Photoshop to make changes to the icons you need in case of image icons.
3) It doesn’t delay web page loading time and supports 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?
- Vast Collection: LineIcons offers 35,000+ icons across 60+ categories, providing all the essentials for any project.
- Constant Updates: Regularly updated with new icons and features, ensuring your designs stay modern and fresh.
- Multiple Formats: Available in SVG, WebFonts, PNG, and more, allowing you to use and customize them however you need for your project.
- Seamless Compatibility: Fully compatible with Bootstrap and other CSS frameworks, making it easy to incorporate into any web or app design effortlessly.
You can download LineIcons, or if you would like to use any other icon packs, you can check this article for 20+ free icon packs. The tutorial is the same for all icon packs. We are just demonstrating the process with LineIcons.
How to Use Icon Fonts with Bootstrap
Getting Started:
LineIcons provides a variety of free icons that are enough to build a complete website and are 100% compatible with Bootstrap. These icons appeal to all screen readers, whether a laptop, personal computer, tablet, or mobile phone. Implementing the icon set in your project is quite simple.
Including Bootstrap Project:
You can use the icon set by including the following snippet on your project header (after downloading and placing it 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 will use icons with Bootstrap, the method is the same as HTML. Open your HTML file on an editor and use the icon class – which is present on the icons page. Also, the cheatsheet HTML file comes with the download package. – in the following format (in the inline elements).
<i class="lni-alarm-clock"></i>
<i class="lni-agenda"></i>
<i class="lni-bootstrap"></i>
Example:
When you use an icon with a Bootstrap button:
Button Code:
<a class="btn btn-primary" href="icons"><i class="lni-grid-alt"></i> View All Icons</a>
Extra Features: To manipulate the size of the icons, you’ve got size classes. LineIcons provides adjustable icon sizes. Look at the following example to learn how to change the size of the icons.
<i class='lni-emoji-happy size-lg'></i>
<i class='lni-emoji-cool size-md'></i>
<i class='lni-emoji-neutral size-sm'></i>
<i class='lni-emoji-sad size-xs'></i>
Another awesome stuff that comes free with LineIcons is its animation classes. It supports some cool effects like fading effect, burst effect, spin effect, etc. The following snippet will give you an idea of how to implement animation with the icon fonts in your project.
<i class='lni-spinner lni-spin-effect'></i>
<i class='lni-alarm lni-tada-effect'></i>
<i class='lni-medium lni-flashing-effect'></i>
<i class='lni-android lni-burst-effect'></i>
<i class='lni-spinner lni-arrow-left lni-fade-left-effect'></i>
<i class='lni-arrow-right lni-fade-right-effect'></i>
<i class='lni-arrow-up lni-fade-up-effect'></i>
<i class='lni-arrow-down lni-fade-down-effect'></i>
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 download the free Bootstrap icon fonts set immediately. Happy designing!
