Hi there, sorry to bother you, but couldn’t quite figure out how I can add custom images to menu options (managed to successfully use the icons for menus, but wanted a sawtooth, pulse and triangle icon and I cannot find these ones in the free-icons unfortunately!).
Any help greatly appreciated thanks!
You could hack your own icons in with a bit of css:
^sawtooth
.fa-sawtooth {
width: 20rem;
height: 20rem;
background: url(/* image icon path or base64-encoded image*/);
}
Thank you again, that is working beautifully! If anyone else is interested in doing the same thing (hacking your own custom icons), I found the best thing was to download a .svg (vector file) of the icon you needed, convert it to a 20px by 20px .svg file using this free online tool https://vectr.com/ , and then converting the vector into a base64-encoded image using this free online converter: https://www.base64-image.de/ . Then just paste the code into the example Jean-emmanuel posted above, and you are good to use it anywhere in your project. Absolutely great hack, I’m going to be using this loads
Hey Kenny! I cannot figure out how to do this. Did everything as instructed above but cannot figure out what I'm doing wrong. Could I have some help please?
Here are some screenshots
Hi Mrkapow, looking at your code, everything looks set up correctly except in your "values" field on the widget you have it enclosed in square brackets, but checking back on my own template I have curly brackets, so I would try changing this first to see if it works then:
{
"^sawtooth"
}
Let me know if this fixes it!
Edit: Just thought, what widget are you trying to add the vector to? Only I think this would work differently depending on what you were doing with it. On my template I had the vectors instead of numbers/labels on a menu (would also work on buttons), so this worked in 'values' for example:
{
"^sawtooth": 1,
"^wave-square": 0.5,
"^triangle": 0
}
However, if it is just a single, resizable image you want as the vector, I've found you can just paste the Base64 code (in its entirety) into an image's 'value' field and that works too. If it is just the label of a widget you want the vector on, you can just type for example '^sawtooth' (without any quotations around it) and that works too. If you are still having problems, I can post an example template if that helps.
Hi Kenny,
I currently have the same problem, I can't have a custom image on my menu.
Would it be possible to share your template to check how you did it in details?
It will be super amazing to learn from you 
Hello Swayrian, no problem at all, I've just pulled out the menu widget that has the custom vectors on it and put it on a new template for simplicity. This is nothing fancy, just a couple of custom vectors that I have defined on the css of the 'root' on the project tree. You'll see that the 'sawtooth' and 'triangle' vector are my custom ones. Then I have just recalled them on the 'values' menu section of the menu itself. There is some additional css code in the menu also, but this has nothing to do with vectors, just the background colour of the menu items itself. Let me know if this helps!
Custom Vector Example.json (7.1 KB)
Hi Kenny,
It's super nice to see how you did it, also thanks to this now I learnt how variables can be used - Thank you so much!
However I'm a little confused about something, how do you change the size of the custom images now that they appear on the menu?
Usually it should be "font-size" but that is only changing one of the icons (the one which is not a custom image). Were you able to do it?
Hey! Thank you so much @Kenny5000 for posting that example! That helped my troubleshoot what I was doing wrong, there was something going wrong with font-size affecting it for some reason. Once deleted it worked. Also adding those numbers at the end also fixed it too. Don't know why it works, also seems to not matter what value you place those numbers
Hey @swayrian
the way I've worked around it is exporting the svg from https://vectr.com/ that kenny already mentioned but instead of exporting as 20x20 I've been exporting at different sizes like 50x30 etc. then you make the changes in width and height. here is my example
values:
{
"^lowpass": 1,
"^wave-square": 2,
"^highpass": 3,
"^flat": 4
}
css
.fa-highpass {
width: 50rem;
height: 33rem;
background: url(blah blah blah);
}
Many thanks @mrkapow
I just tested it and it seems that we have to make the svg slightly larger to have more control over it later - Time for some customization!
Glad everyone has managed to get the custom icons working! Good spot with the resizing issue; I think you are correct that I was inadvertantly making the icon too small initially to be resized, may have been confusing the px size with rem (which when I looked it up is a size relative to the pixels, whoops!). I don't know whether Jean-Emmanuel might be able to point us in the right direction for an easier way to resize these custom images! Good luck with the rest of the template building, would be interesting to see everyone's final template when they are finished, will have to post them in the section on here!
Hello it is not working for me. image not inserting
code i have is
.fa-sawtooth {
width: 20rem;
height: 20rem;
background: url(Nick Saya Clone 10.14.6/Users/nicksaya/Documents/NICK SAYA FONT.pgn);
}
is something wrong?
thanks
Hi
A typo : png instead of pgn ? And maybe some missing " path "
The simplet way to manage images is to put them in the same folder as your session and access them with a relative path:
/* file next to session.json */
background: url(file.png);
/* file in "images" folder next to session.json */
background: url(images/file.png);
fixed spelling still no good
thanks i got it to work