Icons enhance the aesthetics of your website.
They highlight the important portions of your content. They guide users where to click or find the information they want. They also reinforce your brand.
Font Awesome is a popular icon library used by millions of developers and designers. It’s a great source of robust and scalable vector icons. And the best thing - it’s free!
If you’re using Breakdance, you’re in luck. Font Awesome works well with Breakdance.
The installation process is straightforward. Just upload the icons to your library. Then, add them to your design. That’s it!
Font Awesome 6 is the most updated version of the library. I’ll walk you through the installation process in Breakdance. So keep reading!
How to Install Font Awesome 6 in Breakdance
1) First things first. Download the Font Awesome 6 web zip file. Unzip it somewhere easy to find on your computer.
2) Open a page in Breakdance.
3) Click the ‘Add’ button on the top left corner of the editor. Search and click ‘Icon.’
4) Tap ‘Choose’ to open the icon library.
5) Next, we’re going to upload the Font Awesome library. On the pop-up window, click ‘upload.’
6) Locate the SVG files in the Font Awesome folder you unzipped earlier. Here, you’ll find three folders - brands, regular, and solids. Each folder contains the icons to upload.
Starting with ‘brand,’ click the folder to open. Select everything and click open. Back to the icon library window, enter a category name of all the icons you’ve uploaded. Here, I named it ‘FontAwesome - Brands.’
Then, click ‘Save Icons.’
Do the same for the other icon folders.
You should now see the categories containing the icons on the left side of the library.
How to Use Font Awesome in Breakdance
Let’s try to add Font Awesome icons to our Breakdance page.
Here, I have a grid containing three divs. I want to add an icon on each div to label each service.
1) Let’s click the first div and add an icon.
2) On the pop-up window, select a category in the library. Then, choose your icon.
3) Modify the style of your icon. Here, I’ve changed the icon's color and shape. I’ve also changed its background color, size, and padding. Go ahead and experiment with the different styling options on the left side menu.
4) When you’re happy with the look, save the changes and preview.
And that’s it!
Adding Font Awesome icons in Breakdance is straightforward. With a few clicks and a little bit of creativity, you can enhance the aesthetics of your page.
Want more Breakdance tips and tricks? Check out these other tutorials to level up your design skills:
- 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 always writing great tutorials to make the most out of Breakdance - stay updated!
