Icons improve the aesthetics of your web site.
They highlight the crucial portions of your articles. They guidebook end users the place to click or uncover the info they want. They also reinforce your brand.
Font Amazing is a well-liked icon library utilised by hundreds of thousands of developers and designers. It is a excellent supply of robust and scalable vector icons. And the very best factor – it is totally free!
If you are making use of Breakdance, you are in luck. Font Amazing performs properly with Breakdance.
The set up procedure is easy. Just upload the icons to your library. Then, include them to your design and style. That is it!
Font Amazing six is the most up to date model of the library. I’ll stroll you via the set up procedure in Breakdance. So maintain studying!
![10-finaloutput-1 Font Awesome in Breakdance](https://lattestyle.com/wp-content/uploads/2024/01/10-finaloutput-1.png)
![10-finaloutput-1 Font Awesome in Breakdance](https://lattestyle.com/wp-content/uploads/2024/01/10-finaloutput-1.png)
How to Set up Font Amazing six in Breakdance
one) Initial issues initial. Download the Font Awesome 6 web zip file. Unzip it someplace simple to uncover on your personal computer.
![1-downloadfontawesome download Font Awesome](https://lattestyle.com/wp-content/uploads/2024/01/1-downloadfontawesome.png)
![1-downloadfontawesome download Font Awesome](https://lattestyle.com/wp-content/uploads/2024/01/1-downloadfontawesome.png)
two) Open a web page in Breakdance.
![2-openbdeditor open Breakdance editor](https://lattestyle.com/wp-content/uploads/2024/01/2-openbdeditor.png)
![2-openbdeditor open Breakdance editor](https://lattestyle.com/wp-content/uploads/2024/01/2-openbdeditor.png)
three) Click the ‘Add’ button on the leading left corner of the editor. Search and click ‘Icon.’
![3-selecticon select Font Awesome in Breakdance](https://lattestyle.com/wp-content/uploads/2024/01/3-selecticon.png)
![3-selecticon select Font Awesome in Breakdance](https://lattestyle.com/wp-content/uploads/2024/01/3-selecticon.png)
four) Tap ‘Choose’ to open the icon library.
five) Up coming, we’re going to upload the Font Amazing library. On the pop-up window, click ‘upload.’
![4-chooseicon open Breakdance icon library](https://lattestyle.com/wp-content/uploads/2024/01/4-chooseicon.gif)
![4-chooseicon open Breakdance icon library](https://lattestyle.com/wp-content/uploads/2024/01/4-chooseicon.gif)
six) Find the SVG files in the Font Amazing folder you unzipped earlier. Right here, you will uncover 3 folders – manufacturers, normal, and solids. Every folder consists of the icons to upload.
![5-uploadsvg upload Font Awesome in Breakdance](https://lattestyle.com/wp-content/uploads/2024/01/5-uploadsvg.gif)
![5-uploadsvg upload Font Awesome in Breakdance](https://lattestyle.com/wp-content/uploads/2024/01/5-uploadsvg.gif)
Commencing with ‘brand,’ click the folder to open. Decide on every little thing and click open. Back to the icon library window, enter a class title of all the icons you have uploaded. Right here, I named it ‘FontAwesome – Brand names.’
Then, click ‘Save Icons.’
Do the very same for the other icon folders.
You need to now see the classes containing the icons on the left side of the library.
![6-uploadedversions Font Awesome icons in Breakdance](https://lattestyle.com/wp-content/uploads/2024/01/6-uploadedversions.png)
![6-uploadedversions Font Awesome icons in Breakdance](https://lattestyle.com/wp-content/uploads/2024/01/6-uploadedversions.png)
How to Use Font Amazing in Breakdance
Let’s attempt to include Font Amazing icons to our Breakdance web page.
Right here, I have a grid containing 3 divs. I want to include an icon on every single div to label every single support.
![7-addsectionicons Breakdance page](https://lattestyle.com/wp-content/uploads/2024/01/7-addsectionicons.png)
![7-addsectionicons Breakdance page](https://lattestyle.com/wp-content/uploads/2024/01/7-addsectionicons.png)
one) Let’s click the initial div and include an icon.
two) On the pop-up window, pick a class in the library. Then, pick your icon.
![8-addicon add Font Awesome icon in Breakdance](https://lattestyle.com/wp-content/uploads/2024/01/8-addicon.gif)
![8-addicon add Font Awesome icon in Breakdance](https://lattestyle.com/wp-content/uploads/2024/01/8-addicon.gif)
three) Modify the fashion of your icon. Right here, I’ve altered the icon’s colour and form. I’ve also altered its background colour, dimension, and padding. Go ahead and experiment with the diverse styling choices on the left side menu.
![9-styleicon style Font Awesome icon](https://lattestyle.com/wp-content/uploads/2024/01/9-styleicon.png)
![9-styleicon style Font Awesome icon](https://lattestyle.com/wp-content/uploads/2024/01/9-styleicon.png)
four) When you are satisfied with the seem, conserve the modifications and preview.
![10-finaloutput-2 Font Awesome icons in Breakdance](https://lattestyle.com/wp-content/uploads/2024/01/10-finaloutput-2.png)
![10-finaloutput-2 Font Awesome icons in Breakdance](https://lattestyle.com/wp-content/uploads/2024/01/10-finaloutput-2.png)
And that is it!
Including Font Amazing icons in Breakdance is easy. With a number of clicks and a small bit of creativity, you can improve the aesthetics of your web page.
Want a lot more Breakdance guidelines and tricks? Verify out these other tutorials to degree up your design and style abilities:
- How to Use Windmill BDD Library in Breakdance
- An Introduction to Using Global Blocks in Breakdance Builder
- The Best Third-Party Plugins and Extensions to Use With Breakdance Builder
We’re often creating excellent tutorials to make the most out of Breakdance – keep up to date!