Custom icons
Last updated
Was this helpful?
Last updated
Was this helpful?
This tutorial works only with an advanced theme styling setup. As described here .
By default UIkit used for the front-end in the Zero One theme comes with a large set of icons, you can see them all in UIkit documentation.
Some of them are used in the Zero One theme for the social icons, slider & slideshow arrows, search, mobile menu icon, etc. But, many of them are custom, not like UIkit default. Now, we'll show you how to do it yourself.
You can overwrite any of the default icons from UIkit and create additional ones.
In Zero One theme files find and go to /assets/app/custom/icons/ folder. There are already some SVG icons, and these are the ones we added.
Default UIkit icon we used for mobile menu button is menu.svg (all default UIkit icons can be found at /assets/app/src/images/icons/ folder).
If you create and add an icon with an existing name, you will overwrite the default icon of the same name. For example, /custom/icons/close.svg would overwrite the default close icon.
If your icon uses a name that has not been used before, it will be added as a new icon. For example, /custom/icons/example.svg will create a new icon that can be used via <span uk-icon="example"></span>.
After you add a custom icon to /assets/app/custom/icons/ folder you must compile Less/JS again like usual .
We exported every one of them as .svg.
But after exporting you will have to do some SVG code fixing to make it right.
Default menu.svg has this code
But after export, our icon had this code. The main problem in this exported code is width and height.
So after code fixing and cleanup, it looks like this. Now it is ready.
So, the main code fix of the icon is to set width and height to 20.
You can download these menu icons we created below, and try it yourself.
Remember that after you add a custom icon to /assets/app/custom/icons/ folder you must compile Less/JS again like usual .
