Affordable Mobile Website Idaho

IMPROVBOY Online & Print Marketing

“Where inspiration and science create brilliant solutions.”

Call Today!Web Designer Idaho

(208) 270-6445

Add Your Own Icons to Beaver Builder

Beaver Builder - Add Your Own Icon

Beaver Builder – Add Your Own Icon to Beaver Builder Icon Font Library

Sometimes it is necessary to add a custom icon to Beaver Builder’s library of icons.

The other day, I needed to design a website for a dentist. They specifically told me that for some of the buttons on the site, they wanted a tooth to be the icon. Beaver Builder doesn’t have a tooth as an icon. So, the following is how to get your own icons into an icon font library that you can use on Beaver Builder.

Create Vector Icon in Adobe Illustrator

Either create your own vector icon in Adobe Illustrator, or grab one from a stock photo place like Deposit Photos. I found the following vector image on Deposit Photos. I loved the general look of the tooth, and the background doesn’t matter.

Add Custom Icon to Beaver Builder

I isolated just the tooth and created two new Illustrator files that are sized at 512px X 512px.

I wasn’t sure exactly how I was going to use the icon, so I made both versions.

tooth-icon-1    tooth-icon-2

When you create the icons, you can only use one color – black. So, the black tooth has a transparent background, and the white tooth is actually just a black background with the tooth shape punched out and the tooth is actually transparent. By doing this, then the part of the icon that is black can be any color that the designer would like it to be just like any other font.

Once your designs are perfect, then you need to save each icon as an .SVG file, which you can do in Adobe Illustrator.

Create Your Icon Font with IcoMoon

Go to https://icomoon.io/

This is a website that offers a free app to create your own icon font. Click the red IcoMoon App button on the far right side.

Create own icons in Beaver Builder

IcoMoon offers many icon fonts for free.  When you first go to the app screen, you will see the IcoMoon font library. You can pick and choose which icons you like in their library that you would like to add to your own custom library.

Create Custom Icons in Beaver Builder

When you scroll to the bottom of the page, you can click on the “Add Icons From Library…” link, to open other people’s free icon libraries. You would pick and choose the icons just like you did with the IcoMoon Library.

icomoon3

icomoon4

To upload your own icons,  click the Import Icons purple button at the top left.

icomoon5

Upload your .SVG files you just created above. You will now see your icons in a new set. You can title your set if you would like. Be sure to select your icons you just uploaded!

icomoon6

Once you selected all of the icons that you want, click on the lower right Generate Font button.

icomoon7

You will see the following screen. Click on the Preferences button.

icomoon8

Change the font name to whatever you would like, and then change the Class Prefix  — this is a must! You can leave everything else as is.

icomoon9

Go back and click the Font Download button.

icomoon10

You now will have a zipped file.

icomoon11

Add Your New Icon Font To Beaver Builder

In the backend of your website, go to Settings -> Page Builder -> Icons tab.

icomoon12

Upload your icon set that you just created on IcoMoon.

icomoon13

Now when you need an icon, your new icon font library will be available with the other default icon libraries.

icomoon14

Cheers!

Sheri Smith

Sheri Smith

Head Programmer and Graphic Artist

Sheri is the head programmer for Improvboy, and has been working in the industry since the 1990's. Her expertise is mostly in HTML, CSS, PHP, MySQL, and javascript. If you need a website, ecommerce store, or website fixes, please don't hesitate to contact her here. She will be happy to help you out.

Share This