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

Tutorials
,
21

Looks like I’ve found a problem. I should urlencode a hashtag symbol. Will fix next week, now I’m in a rush.

As a quick workaround, you can just replace ‘#’ with ‘%23’ in any text editor.

UPD: I’ve added a quickfix. When you download css, it replaces hashtag to ‘%23’. Later I’ll change the color handling to make it right way.

22

To make them colorable, you have to find a CSS containing the codes like \783 from the font instead of svg items.

Like those guys offer:
material-icons-font/css at master · material-icons/material-icons-font (github.com)

23

I’ve dealt with Material icons, here is a guide:

  1. Open material-icons-font/font at master · material-icons/material-icons-font (github.com) and download required fonts.
  2. Download required css styles from here: material-icons-font/css at master · material-icons/material-icons-font (github.com).
  3. Use my script to generate a JSON file for WeWeb.
  4. Inside CSS: remove font-size: property from .material-icons class and remove ../fonts from url() attributes, leave just a filename.
  5. Inside JSON: remove non-icon classes (like .md-48, leave only those who contain :after {content} in your css. Then use a notepad (++) to replace all "md- to "material-icons md-.
  6. Upload css, json and font files to your weweb files section.
  7. Follow the guide above to install an iconset.

You’ll get a working iconset, which resizes and can be recolored.

image
image897×641 43.9 KB

image
image1069×454 60.2 KB

1 Like
24

Hey,

Thanks for looking at this. Your fix has nicely resolved the white/coloured icons being imported but unfortunately there’s another issues that’s reared it’s head.

It seems that you can’t have the same icon packs but in different colours. Something is being shared and overwritten I guess.

I’ve tried with 2 icon sets and the same thing occurs.

White was working on its own as the first import. I then add black as a second set and it replaces the white with black. So I can’t have both it seems.

image

image

25

Just rename common classes in CSS. CSS is named “Cascade” because later loaded rewrites early loaded. You always have something like “iconify…” so…

Take notepad, search for “iconify-akar-icons” and replace every match to “iconify-akar-icons-white” and “iconify-akar-icons-black” (for the second css file).

or just find the font-based version ( akar-icons-fonts/src/css at main · artcoholic/akar-icons-fonts (github.com)) and follow the guide I made above for Material Icons. Then you’ll be able to handle those icons like predefined by weweb team.

image

@font-face {
    font-family: "akar-icons";
    src: url("akar-icons.ttf") format("truetype"),
url("akar-icons.woff") format("woff"),
url("akar-icons.svg?%23akar-icons") format("svg");
}


.akar-icons {
    font-family: akar-icons !important;
    font-style: normal;
    font-weight: normal !important;
    font-variant: normal;
    text-transform: none;
    line-height: 1;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

[
  {
    "name": "air",
    "class": "akar-icons ai-air"
  },
         ...
]
26

Hi @Antiokh
Thks for all those tipps
I unfortunately fail at getting the material-icons into WeWeb as icon. Would you share the link of your css and json file in this thread ?
They do not seem to work in your tool either

1 Like
27

They’ve updated the icons component, my tool is no longer relevant. I’ll review my tool asap and update it if it’s necessary.