Custom Iconify icons (or any font based CSS) as Weweb icons

[Antiokh]

To add some iconset from Iconify you have two options:

1. Use Iconify or other JS library: Adding custom icons to weweb

• : you will have a largest icon library with dynamically loaded icons from lots of iconsets.
• : you will need to use some hacks to load those icons to WeWeb editor and every tilme you will need wrappers-workarounds-embeds to do a simple task.

2. Use a standard WeWeb icons interface for your static (and cached) icons.

• : it’s easier to use. You see your icons and can choose.
• : it’s complicated to set up for now.

This tutorial explains the second option. Just follow the steps:

1. Open the script I’ve made: Iconify Generator (antiokh.github.io).

2. Select desired iconset from the dropdown (and pray that it works correctly).
   

   

3. Select the icons you want or just click “Generate for all” to create json&css for the whole set. Keep in mind that Iconify API has limits for the url length. I haven’t tested this limit, but if you see nothing in the outputs — try to select less.
   

   

4. Press “Download CSS” and “Download JSON” to save your files to your computer.
   

   

5. Open your project’s Files.
   

   

6. Upload your 2 files for the iconset. Click on the blue icon to copy the uploaded file urls.
   

   

7. Open your project’s Icons.
   

   

8. Create a new iconset: Press “Add Icons”, enter set’s name, paste css url from the step 6 to the second field, .json to third field. Click “Add”.
   

   

9. Press “Save” in icons list.

10. Refresh the editor page.

11. Select your icons from your new icon set and enjoy. Don’t forget to set the size of the icon.
    

    

Notes:

P.S. WeWeb sometimes discards all the icon sets after you add yours. The script can still be buggy and requires some homework, but it works.
P.P.S. @Joyce @Alexis please change the css of “Hero Icons”, remove/change this:

[class^="icon-"],
[class*=" icon-"] {
    /* use !important to prevent issues with browser extensions that change fonts */
    font-family: "heroicons" !important;

maybe you shouldn’t bind any icon- class to heroicons. I’ll create a ticket. Many iconify icons will be broken because of this. I’ve made a workaround in my script, but it shouldn’t be there. Most Iconify classes start with icon-.

UPD: Now you can insert a css and convert to WeWeb Json.

Please remember that my algorhytm is trying to find longest and most popular (>50%) prefix, so for the css like this it will be .ph-bold.ph-airplane-:

@font-face {
  font-family: "Phosphor-Bold";
  src: url("./Phosphor-Bold.woff2") format("woff2"),
    url("./Phosphor-Bold.woff") format("woff"),
    url("./Phosphor-Bold.ttf") format("truetype"),
    url("./Phosphor-Bold.svg#Phosphor-Bold") format("svg");
  font-weight: normal;
  font-style: normal;
  font-display: block;
}

.ph-bold {
  /* use !important to prevent issues with browser extensions that change fonts */
  font-family: "Phosphor-Bold" !important;
  speak: never;
  font-style: normal;
  font-weight: normal;
  font-variant: normal;
  text-transform: none;
  line-height: 1;

  /* Better Font Rendering =========== */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.ph-bold.ph-address-book:before {
  content: "\e900";
}
.ph-bold.ph-airplane:before {
  content: "\e901";
}
.ph-bold.ph-airplane-in-flight:before {
  content: "\e902";
}
.ph-bold.ph-airplane-landing:before {
  content: "\e903";
}
.ph-bold.ph-airplane-takeoff:before {
  content: "\e904";
}

[aurelie]

Hey,
thank you so much for this!
I am advocating for iconify internally for so long now
I am still hopping than one day it will be natively support by WeWeb

[Kevin]

[Zacharyb]

Awesome thanks, for Phosphore and Generate All, does not really work but was able to get the names and props for the CSS which is a good starter

Phosphor CSS - Pastebin.com

[felipegranado]

Hi!

I was trying to insert new icon packs and simply the native icons disappeared from the list, removing all the icons I had previously used. Is there any way to recover the default icons? The same thing happened with the fonts.

Thanks in advance!

@Joyce @aurelie @Kevin

[mauromequelussi]

How about coming as a Christmas gift .

From what @flo said in the last Office Hours this would be implemented, is there a forecast?

[Antiokh]

My tool has one main problem: icons, imported this way can’t be colored. I’ve tried to replace ‘black’ fill to ‘currentColor’ as SVG theoretically supports it.

It didn’t work either as background or via subclass “:before” in CSS.

MAYBE I’ll make another tool for the font based icons. For myself and share.

Iconify API generates bad CSS sometimes. Like double classnames or fixed size for icons.

I think that Iconify plugin for Figma works different way to show all the icons correctly.

[Antiokh]

Yes, and sometimes WeWeb shows only one icon (number of icons at the list) after you import the icons (for example for the full “Flat UI” iconset).

I’ve created a new clean project and didn’t got this problem, a list of native icons is loaded, but with a very huge delay.

[Antiokh]

If you have any ideas on how to improve it, I’m all ears.

[Antiokh]

I’ve updated the tool, now you can pass a css from phosphor to the first textarea and press “convert”

[benji241]

Is there a limit to how many this can generate for? Some of them such as Phosphor and HeroIcons don’t do anything when you select “Generate for All”

[Antiokh]

If you use an option to generate from a Iconify collection, you’re limited to the API query size, some iconsets brake on this. If you use it just as converter (and it’s more preferrable if we speak about font-based iconsets like phosphor), you’re limited only by your RAM.

[thisismetrying]

I tried the Material Design Iconic Font. It successfully uploaded and I refreshed the page but the icon won’t show on weweb…

Help??? why is it so hard to upload icons… and why is material design not on the list of default icons

[Antiokh]

@Antiokh

Select your icons from your new icon set and enjoy. Don’t forget to set the size of the icon.

I see an empty width

[thisismetrying]

oh silly me. I only put the size and forgot the width and height. THANK YOU SO MUCH!!!

[thisismetrying]

Got another problem. The icon is now showing but I can’t change the color. Do you know how to change it? TIA

[Antiokh]

That’s what I said about. API gives only black-colored icons. I didn’t found any way to brush them.
Tried CSS hacks, SVG hacks, still nothing.

You can use non-API, paste css, manually downloaded from some source and get weweb-json file.

[Antiokh]

Update: you can now change the icon colors. As they’re css, not font-based, you can not change their color in weweb after import.

[what.gift]

This is awesome! Thanks.

I followed the instructions and it worked perfectly.

As you’ve kindly added the ability to change colours, I’ve gone added a 2nd set of “feather icons”. However, they’re now both blank? I’m pulling a blank too!

[Antiokh]

I can check this particular set of icons, my new addition just replaces the “fill” and “stroke” arguments in the generated CSS. So you can try to replace those values yourself and check if it works the same way. Mistakes are possible. Some icon fonts have more than one color, and in this case, you should be careful of what you’re changing.