Adapt Learning Community: Custom made svg icons

Hey everybody

Is it possible to add our own svg's to the already existing vanilla font?

I've tied fiddling around with vanilla.svg and selection.json, but with no results so far.

In vanilla.svg I tried adding a new <glyph> by copying one of the other <glyphs> and make a new unicode:

<glyph unicode="&#xe901;" glyph-name="test" d="M276.48 256h471.040l-235.571 409.6z" />

and then I tried copying the corresponding set of code in the selection.json a renamed deffaultCode, order, id, name, code and iconIdx:

{
   "icon": {
      "paths": [
         "M276.48 716.8h471.040l-235.571-409.6z"
],
"attrs": [],
"isMulticolor": false,
"tags": [
         "arrow-up",
"triangle",
"up",
"top"
],
"defaultCode": 60000,
"grid": 20
},
"attrs": [],
"properties": {
      "order": 204,
"id": 94,
"prevSize": 20,
"name": "test",
"ligatures": "",
"code": 60001
},
"setIdx": 0,
"setId": 1,
"iconIdx": 94
}

Afteards I put "\e901" into:

.icon-sound:before {
    content: "\e901";
}

But the icon does not show.

The problem is that I don't fully understand how it all works and I think I might have to edit the vanilla.eot, -.ttf and -.woff too, in order to make the icon show.

Anyone tried this who can point me in the right direction would be great!

Thank you

Henrik

Hi Henrik

I don't know how to add your custom icons directly to the fonts, but you can add them (svgs) via the www.icomoon.io by uploading the selection.json to the site (which is the original vanilla fonts), then add your custom icons to the selection, then generate new fonts.

Cheers

Sam

Show parent | Reply

Thanks Sam!

I will try that and report back :)

Show parent | Reply

Sam's method was spot on!

For anyone else who might have the same question as I, here is how to import you own svg icons to an Adapt theme:

1) Create the new icon and export it as svg (no strokes allowed!)

2) Open the Adapt theme and locate the folder "fonts"

3) Upload the selection.json file to icomoon.io (via the "IcoMoon app")

4) Upload the new svg icon too (the site doesn't accept strokes and asks you to convert strokes to fills)

5) Create and download the new font-package (zip file) from the IcoMoon app

6) Unzip the font-package and replace the old font-files and selection.json in the Adapt theme

7) Upload this new theme to your course

8) Done!

Hope this might help others who also wants to make their own icons :)

Cheers, Henrik

Show parent | Reply

Hi Henrik

Glad it is of help.

you might also need to modify the icons.less file in your theme to reflect the new fonts you added.