The font-size is set to 32px by default, so I changed it to my 24px. To get started with development, copy the files in /fonts and /css to your project and import the style sheet in the HTML. Once finished, you will find numerous files in there, including a demo.html to see all icons and their names. You can also change the metadata if you so desireĬlick "Export Icons" and select an empty folder. Click on "Icon Font" and you will be asked to choose a name for the font. To create the icon font, right-click on the set name and select "Export". It should reflect the dimensions you chose in Figma. Make sure that the grid size at the bottom left only shows a single option. You can drag and drop a folder with your icons into the application and give it a name. Note: While they are currently not offering a Linux client, I had no trouble installing and using the Windows version with Wine.Īfter installing and starting the desktop app, click on the "+" in the top left corner, to create a new set. Using their organizer for external icons is free. In case you don't want to start your collection from scratch, Nucleo offers over 28.000 high-quality icons for a one-time payment with lifetime updates. To bundle our icons to a font, we use Nucleo's desktop app. Once you are happy with what you created, export them to SVG in the bottom right corner. Select all icons you would like to export as separate files. They cannot contain any pixel-based graphics, like PNGs or JPEGs, and have to be in a single color. When you draw your icons, make sure to stick to the same dimensions - common sizes are 16x16, 20x20, 24x24 or 32x32. There are many great tutorials on how to get started with Figma and what to look out for when creating icons, so I won't get into much detail. Figma is great because it's free to use, its vector capabilities are powerful enough to create any kind of icon and it exports clean SVG files we can continue with. After importing it to any project, you will be able to use them by adding a single line of HTML. In this article I will walk you through the process of drawing, exporting and bundling your icons to a font in the same way we do it at Emvi.
0 Comments
Leave a Reply. |
AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |