Importing a new icons collection

Hi all,

I know there’s been a lot of discussion lately about custom icons, and I recently noticed the “more” hamburger menu at the top of the editor now has an “icons” option that opens a “project icons” view showing the default loaded icon collections as well as a “Add icons” button. This opens another view that has a “Display name” input, an “Icons file URL” input, and an “Icons list URL” input.

I found this collection of free icons I would like to use: GitHub - krystonschwarze/coolicons: coolicons is a carefully designed collection of 440+ icons with a focus on simplicity and consistency. Perfectly suited for web, application and mobile design.

What icons file and icons list URL am I supposed to use to import this into my project?

Thanks!

@flo this is what I was asking about in today’s office hours :slight_smile:

You will need font from the icons, css file of classes for those icons and list of all icons in json format

You can go to any project, click icons, click edit on any of them and if you open the links you can see the format

right now its difficult, we already know this, we’re going to be working to fix this

1 Like

Okay his is actually driving me insane. I have forked the collection I linked in my original post here and attempted to refactor for compatibility with WeWeb’s icons system. Here’s the thing though: it still doesn’t work!

See here: GitHub - gduteaud/ww-coolicons: Kryston Schwarze's awesome free Coolicons collection, refactored for compatibility with the no/low-code frontend builder WeWeb

I’m serving via jsDelivr:

https://cdn.jsdelivr.net/gh/gduteaud/ww-coolicons@0.1.0/icons-file.min.css
https://cdn.jsdelivr.net/gh/gduteaud/ww-coolicons@0.1.0/icons-list.json

Does anyone see what I’m doing wrong?

EDIT:

Here’s my config:

Screenshot 2024-03-23 123636

What it looks like in more > icons:

And what happens when I try to actually use an icon from this new collection:

Have you uploaded the font .woff file to fonts in weweb?

I had not, since it’s included in the repo so I assumed it’s accessible that way.

I added the font to WeWeb though (see below), and everything is still the same.

is the font actually loaded? you can check the network tab and see what path is trying to load for the font

  • Open this link
  • Right click - Save as
  • Upload it to Files in WeWeb
  • Copy the link to the file
  • Paste it instead of the icons-file.min.css link in icon settings

This finally works, thank you. Can you tell me exactly what’s different between that style.css doc and my icons-file.min.css so I can understand what’s happening and be able to do this properly by myself next time?

The class that sets the font to the icons was mistyped, it was i instead of .ci

I see, thank you. I modified my file with the corrected selectors from your file and everything works as expected now with the links served from jsDelivr, even without the font installed.

1 Like

@gduteaud first thank you for sharing your work to make coolicons compliant w/ Weweb! Do you think possible to provide w/ the pro package, maybe in private, or the step by step guide to transform the package to compatible w/ Weweb ?