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

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.


1 Like