Gold Penguin Logo with Text

Install Font Awesome 6 in Breakdance Builder

Font Awesome 6 is the most updated version of the Font Awesome library. In this tutorial, I’ll show you how to install and use these cool icons in Breakdance.  
Updated September 3, 2023
Font Awesome in Breakdance
Font Awesome in Breakdance

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!

Font Awesome in Breakdance

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.

download Font Awesome

2) Open a page in Breakdance. 

open Breakdance editor

3) Click the ‘Add’ button on the top left corner of the editor. Search and click ‘Icon.’

select Font Awesome in Breakdance

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.’ 

open Breakdance icon library

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. 

upload Font Awesome in Breakdance

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.

Font Awesome icons in Breakdance

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.

Breakdance page

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.

add Font Awesome icon in Breakdance

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.

style Font Awesome icon

4) When you’re happy with the look, save the changes and preview.

Font Awesome icons in Breakdance

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:

We're always writing great tutorials to make the most out of Breakdance - stay updated!

Want To Learn Even More?
If you enjoyed this article, subscribe to our free monthly newsletter
where we share tips & tricks on how to use tech & AI to grow and optimize your business, career, and life.
Written by Christy Cañete
Christy Cañete is a software engineer who's passionate about front-end web design. Not only can she code, but she writes too! She loves breaking down technical topics into super easy tutorials. If you're looking to learn without the jargon, she's your go-to.
Subscribe
Notify of
guest

0 Comments
Inline Feedbacks
View all comments
Join Our Newsletter!
If you enjoyed this article, subscribe to our free monthly newsletter where we share tips & tricks on how to use tech & AI to grow and optimize your business, career, and life.
magnifiercross