To verify that the font looks proper, open the.The files we are most interested in are the.Note: selecting the "Preferences" button will give you options to name your CSS classes and files.Select your icon from the list (should appear under "Your Custom Icons" section, and select the "Font ->" button at the bottom of the screen.Import your SVG icon - select "Import Icons" and choose your SVG file.Go to IcoMoon (you can also run IcoMoon in "offline" mode in Chrome browser by installing the IcoMoon Chrome app).it will render as transparent) - in this case you may need to build a single shape from these conflicting shapes, or ensure none of your shapes overlap.ĭownload Example SVG file: pencil-icon-01.svg Step 2. Overlapping regions of shapes may cause a subtraction when converted in IcoMoon (i.e.Sometimes the font conversion of the SVG may not work properly, so be prepared to edit your SVG file again.black and white) and do not apply effects such as drop-shadows or embossing. The dimensions of the graphic doesn't matter since everything will be scaled by the browser's font-rendering.
Use illustration software to create an SVG version of the icon you want to use as a font.
Use IcoMoon to generate a font from an SVG graphic.Ĭontent: "\e000" /* The custom Unicode (aka.Create the icon and save it as an SVG graphic.Research of viability of using icon fonts in UI Options.Modifying icon fonts is as involved as generated a new icon graphic in the "traditional" way - there is no real time saved in that regard.In situations where there is existing text accompanying an icon, specific markup containers need to be created for the icon.Globally changing fonts will cause the text vs the icon to show.Icon fonts are generally mono tone in colour.However there are some shortcomings to keep in mind: Changing icons to fonts is as simple as changing the font-family in CSS.Can add strokes, gradients, shadows, and etc.Can do everything traditional icons can (e.g.Scalable - works nicely regardless of client's magnification or view device DPI.Using a font to represent an icon has advantages over the traditional method of using an image, namely: