Create custom icon fonts: Create an exclusive icon system using Illustrator and IcoMoon
Core points:
@font-face rules and all symbol selectors that can be included in the website HTML, thereby adding custom icon fonts to web page items. 
Icon systems are usually the core design element in web projects. There are many free or commercial icon sets online, which are usually included in the main CSS framework (Bootstrap 3 Glyphicons is a great example).
However, sometimes you may need a more specific glyph not included in the general set. Or you might just want to better coordinate the icon design with other design elements in your project. In these cases, you need to draw a new icon set from scratch.
Two common ways to add icon sets to your project:
Traditionally, font creation has been a difficult and demanding task, but thankfully, it has become much easier to create icon font sets thanks to the advent of simple online tools such as IcoMoon, Fontastic, or Fontello. Each tool allows you to build fonts by "selecting" pre-built icons from the public library or uploading and compiling your own prepared SVG files.
Create your own icon
To build your own icon fonts, the first step is to design the icons – we will use Illustrator for this task – and then save them in SVG format.Confirm the design style
First, do some readability tests at different sizes and build a template for drawing all glyphs. The beautifully detailed icons that design does not work at lower resolutions are useless.
It is also useful to draw font sketches before drawing, and even a very rough sketch (shown below) can help you find ideas for all the symbols you need.
You can then determine the mesh size for the glyph. My advice is not to draw directly at the target size (e.g. 16x16px) or very large sizes. Instead, I found that a grid of 60-80px is usually good for me. Scaling up or down from this size is usually successful.
Of course, this is not a "stand-alive" rule: project requirements and experience may vary from situation to situation.
In this article, I chose to use 8px strokes to draw the icon, not fill, and set it inside a 64x64px grid.
Start drawing
Illustrator artboards work very useful: you can draw each glyph in different artboards and save each glyph in a single file. The artboard can be rearranged, renamed, and exported as a standalone SVG file (this is exactly what we need for IcoMoon).
Each artboard can also have independent axis coordinates, which is very valuable for object alignment, which we will see later.
Now we can start creating a new 64x64px Illustrator document:
Note that you can start creating all the artboards you want with the "Number of Artboards" option: I prefer to add artboards as needed, but there is no reason why you can't create all artboards first.
Now we can set up the grid. We want it to start with each artboard origin (top left corner) and divide the artboard into 8x8 checkerboard grids. Before that, let's take a quick look at how the Illustrator coordinate system works.
Illustrator workspace consists of a canvas containing one or more artboards.
The artboard is placed on the canvas, starting with a point called the origin of the global ruler. In addition, each artboard also has its own original origin and ruler.
When you use the Artboard tool to locate a new artboard, you will always use a global ruler. In almost every other case, you will use the artboard ruler according to the View → Ruler → Change to Artboard (or Global) Ruler options.If you are using a global ruler, each object drawn on any artboard is drawn relative to that single origin (i.e.
Global ruler origin ). Otherwise, the coordinates refer to the origin of the artboard containing it.
In short, use the artboard ruler system:
Illustrator's grid is placed on the workspace starting from the global ruler origin. You can select Preferences → Guides and Grids to set its properties. Since we want to divide our 64x64px canvas into 8 parts, one on each side, we will set a main grid line every 16px (this will result in our artboard being divided into 4x4 parts) and perform two subdivisions:
Now we have to make sure our grid exactly matches our artboard. By default, the first artboard is placed at the global ruler origin, however, because the artboard can be moved and reset: to do this, just double-click the ruler origin using the artboard tool.
Our grid should now be perfectly aligned with our artboard:
Let's start with our first glyph, a simple check mark Inside the circle:
To draw a circle, we must select the Ellipse tool, click a point in the artboard and enter the width and height of the ellipse:
Next we have to remove any fill and set the 8px size black strokes. At this point, we can align the circle with the artboard (make sure the "Align to artboard" option is selected):
But the result is not what we expected: Illustrator aligns the path without calculating the stroke width. Thankfully, this can be easily solved by setting the Use Preview Boundaries option in the Preferences panel. Illustrator now calculates the stroke width inside the artboard regardless of alignment and size, which makes drawing faster and more accurate.
Now we have to draw each glyph, adding a new artboard at a time. You can use the Artboard Tools and Options /alt to drag an existing artboard or click the New Artboard icon in the Artboard panel to add an artboard.
You can then easily rearrange the artboards by selecting Object → Artboard → Rearrange (or the Rearrange Artboard command in the Artboard panel menu) and in the order in the Artboard panel.
Note that glyphs are always uploaded alphabetical, so if you want the artboard order in Illustrator to match the glyphs in fonts, keep this in mind.
Name each artboard (without spaces): This will become the name of the glyph and the class name of the generated CSS, so it is very important to use meaningful words.
Although we often use strokes to draw symbols, there are some special needs for font creation. We must remember:
You can use the Extend command to convert paths to fill shapes and use the Path Finder panel to quickly combine overlapping shapes into single elements.
When the glyph is ready, we can save each glyph as a separate SVG file in the Save As dialog box using the Use Artboard option.
Illustrator saves SVG files by prefixing the .ai document name (icons_). Since IcoMoon uses file names as glyphs, I prefer to remove this prefix (there are a lot of small applications that can easily rename all files) to reduce any confusion.
Upload the file to IcoMoon
IcoMoon website provides an online application to build icon fonts. The app starts with unnamed items and offers access to some free icon library from which you can select symbols.
Since we will upload our own glyphs, we can delete all preloaded libraries using the small menu to the right of each library (note that this is not mandatory, as only the selected symbols will be added to your font middle). It just keeps your project simple.
You can then click the Manage Project icon to the right of the application menu bar to save your project. Note that with the IcoMoon free account, your project will be stored in your browser, so before you download project data (JSON files) or upgrade to a premium account (allowing you to store projects in the cloud) you will It cannot be accessed elsewhere.
You can now upload your SVG file using the Import Icon button: your glyph will appear in the application as a collection. Each glyph can be easily rearranged, deleted, or edited using the tools provided by the application at this stage. You can also edit the collection metadata (the name of the collection and some author information) or perform other tasks using the small menu on the right side of the collection.
Icons can be edited in the application using the editing tool. You cannot change vector data this way, but you can resize or move the glyph, download the SVG file, or replace it.
To build a font, you first need to use the selection tool to select all the required icons (if appropriate, you can also use the "Select All/No Select All" command in the collection menu). You can identify selected glyphs through their yellow borders. You then have to click the Font button at the bottom of the page.
The application will load a helper window with all selected symbols, showing each symbol the glyph, name, and Unicode points assigned to it by IcoMoon within the PUA range. Using PUA ranges is considered the safest Unicode area to host icons within PUA ranges, although IcoMoon allows you to use the standard basic Latin range by clicking the "Code" button at the top if you prefer.
You can also assign a different range code to each character by manually inserting a new code or character:
Before downloading the font, add the font name (this will be used for the @font-face rule), as well as the class prefix and/or suffix (this will be used as a selector in the generated CSS).
You can set many other parameters: from metadata information to metric values, I recommend carefully reading the short and well-explained documentation to set all parameters correctly.
Your icon set is finished! Download your font (or, if you have a premium account, just link to CSS) and add it to your project.
The downloaded .zip file contains fonts in various formats, demo files that you can use as a reference, .json files that can be re-uploaded to recover the project (for example, view it on another computer), and of course, there is also .css file encoding icon.
CSS (you can see an example below) contains @font-face rules and all symbol selectors.
@font-face {
font-family: 'icomoon';
src:url('fonts/icomoon.eot?-88cxph');
src:url('fonts/icomoon.eot?#iefix-88cxph') format('embedded-opentype'),
url('fonts/icomoon.woff?-88cxph') format('woff'),
url('fonts/icomoon.ttf?-88cxph') format('truetype'),
url('fonts/icomoon.svg?-88cxph#icomoon') format('svg');
font-weight: normal;
font-style: normal;
}
[class^="myicon-"], [class*=" myicon-"] {
font-family: 'icomoon';
speak: none;
font-style: normal;
font-weight: normal;
font-variant: normal;
text-transform: none;
line-height: 1;
/* Better Font Rendering =========== */
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
.myicon-alert:before {
content: "\e600";
}
.myicon-arrow-down:before {
content: "";
}
/* etc */I found this to be a very quick way to build icon fonts, but it certainly takes time to find the perfect workflow and test all the options that both Illustrator and IcoMoon can offer.
I wish you a happy time!
(The following is the FAQ part, which has been rewritten and integrated according to the original text and has been adjusted in the format)
FAQs (FAQ) on Creating Icon Fonts with Illustrator and IcoMoon
Q: What are the advantages of creating icon fonts with IcoMoon?
A: IcoMoon is a powerful tool that allows you to build and manage your own icon set. It offers a wide variety of icons to choose from, and you can also import your own SVG to create custom icon fonts. The advantage of using IcoMoon is that it simplifies the process of creating icon fonts, which can be easily used by even beginners. It also allows you to control the icon's size, color, and other CSS properties, providing greater flexibility in design.
Q: How to import my own SVG into IcoMoon?
A: To import your own SVG into IcoMoon, first make sure your SVG is optimized correctly. Then, go to the IcoMoon app and click the "Import Icon" button. There you can select and upload your SVG file. Once uploaded, your icon will appear in the "Your Custom Icons" section, ready to be added to your icon set.
Q: Can I create SVGs for IcoMoon using Adobe Illustrator?
A: Yes, you can create SVGs for IcoMoon using Adobe Illustrator. Illustrator is a powerful vector graphics editor that allows you to create and edit SVG files. After you create an icon in Illustrator, you can export it as an SVG file and then import it into IcoMoon to create an icon font.
Q: How to control the size and color of an icon in IcoMoon?
A: In IcoMoon, you can use CSS to control the size and color of the icon. When generating icon fonts, IcoMoon provides a CSS file containing the classes for each icon. You can edit this CSS file to change the size, color, and other properties of the icon.
Q: What are the best practices for creating icon fonts in IcoMoon?
A: When creating icon fonts in IcoMoon, be sure to keep some best practices in mind. First, make sure that the SVG is optimized correctly before importing it into IcoMoon. Secondly, try to make the icon set as small as possible to reduce the loading time of the website. Finally, remember to test your icon fonts in different browsers to make sure they appear correctly.
Q: Can I create icon fonts for business projects using IcoMoon?
A: Yes, you can use IcoMoon to create icon fonts for business projects. However, you should know that some of the icons provided by IcoMoon are subject to licensing restrictions. Always check the icon's license before using it in a commercial project.
Q: How to add my icon font to my website?
A: After creating an icon font in IcoMoon, you can add it to your website by including the CSS file provided by IcoMoon in the HTML of the website. You can then add the icon to your website using the class defined in the CSS file.
Q: After creating the icon set in IcoMoon, can I edit it?
A: Yes, after creating the icon set in IcoMoon, you can edit it. To do this, go to the Manage Projects section in the IcoMoon application. There you can select your project and make any necessary changes to the icon set.
Q: How do you make sure my icon fonts are displayed correctly in all browsers?
A: To make sure your icon fonts are displayed correctly in all browsers, be sure to test them in different browsers during development. In addition, IcoMoon will provide an icon font CSS file with necessary browser compatibility fixes.
Q: What should I do if I encounter problems creating icon fonts in IcoMoon?
A: If you have problems creating icon fonts in IcoMoon, you can refer to the IcoMoon documentation or contact the IcoMoon support team for help. In addition, there are many online communities and forums where you can seek help and advice.
The above is the detailed content of Create an Icon Font Using Illustrator & IcoMoon. For more information, please follow other related articles on the PHP Chinese website!
![[Web front-end] Node.js quick start](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
