To add some iconset from Iconify you have two options:
- 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.
- 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:
-
Open the script Iâve made: Iconify Generator (antiokh.github.io).
-
Select desired iconset from the dropdown (and pray that it works correctly).
-
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.
-
Press âDownload CSSâ and âDownload JSONâ to save your files to your computer.
-
Open your projectâs Files.
-
Upload your 2 files for the iconset. Click on the blue icon to copy the uploaded file urls.
-
Open your projectâs Icons.
-
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â.
-
Press âSaveâ in icons list.
-
Refresh the editor page.
-
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";
}
.
