How to use Iconfinder icons

Beaver Builder
1

I downloaded some flat color icons from Iconfinder.com

Having trouble figuring out how to import them as icons.

Read this tutorial,

but when imported, nothing shows up, just blank spots where the icons should be in the library.

Any suggestions?

Thanks,

2

Sorry, the link I was trying to put in the last post was this.
http://forum.wpbeaverbuilder.com/using-custom-font-icons-beaver-builder/

3

Hey David,

Have you seen this blog post with instructions on how to do this? It contains all the info you need to add your own icon sets. Hope that helps and let us know if we can assist further!

Best,
Billy

4

Ah, just saw the link come through and it is the same article. I think the step you are missing is uploading your font set to IcoMoon or Fontello to generate the zip. Give that a shot as you won’t be able to upload the icons directly into BB without that step.

Best,
Billy

5

Yes, I tried uploading the .svg files (3 for testing) to Icomoon and download as “generate font” and “svg, png” and uploaded the zip files to page builder settings as Icon Set. Neither worked.

I’ll try Fontello too. Any other suggestions?

Dave

6

Hmm, it should work in that case. Go ahead and try Fontello if you like and let me know what you find. It’s possible the new icon set is cached too and perhaps just not rendering quite yet. Have you cleared the BB cache as well as any cache plugins you have installed?

Best,
Billy

7

ok, fontello, sort of works. They show up as black and white.
Can I use flat color icon fonts with BB?
It also comes up with this pop up after I upload to fontello.
“If image looks not as expected please convert to compound path manually. Skipped tags and attributes: fill”
I tried looking that up, but I have no idea what they are talking about.

Thanks,
Dave

8

Can I send you one of the icons for you to take a look at?

Thanks

9

This is the type of icon I am trying to use.
https://www.iconfinder.com/icons/762490/coffee_coffee_shop_location_map_navigation_pin_poi_icon#size=128
or
https://www.iconfinder.com/icons/873252/aim_business_finance_goal_target_icon#size=128

Is there a way I can use these. They don’t seem to work when I use Icomoon to create a set.

Any advise is helpful.

Thanks,

10

Hey David,

Just wanted to chime in here. Once you convert an icon to a font, it will follow whatever color is being set to them, just like how a normal text would work. On our Icons module, you can set this under the Style tab.

If you want to use the icon as it is, i.e., with its color, I’d suggest not to convert it into a font and just use it as an image.

Hope this helps! :slight_smile:

Ben

11

Thanks, Ben! I thought there might have been a way, but the image works just as well.

12

No worries! Enjoy BB! :slight_smile:

Ben