Our expirience

How to create your own icon font

07/07/18 / Longread

Moscow was not built in a day

Moscow was not built in a day, and our icons have a long history.

It's not a secret for anyone, I hope? that it is a normal practice to gain experience and work in the field of coding, design and other fields of IT related to intellectual property. In a certain period of time, it even became a pleasant bonus when hiring. When you had your pieces of code, design elements or other bonuses accelerating immersion and development in this area, it could become, if not decisive, then one of the important factor.

After — against the background of the appearance of libraries like jQuery, and much later Bootstrap and FontAwesome the urgent need for such pieces disappeared. But in return we got a loss of uniqueness of web products. Tough and aggressive, I also sinned and continue. Sometimes.

For popular products that are supported by the community, it's easy, there is good documentation and enough to study a convenient and suitable set of functions, or at least just a basis and voila.

Concerning the same bootstrap, honestly, I will not say exactly at what point, there is an opportunity to assemble a project for myself, than at the moment we are happy to use, collecting projects on Gulp. Simply import the components we need, overwrite the variables data (we do not even use custom.scss to overwrite the styles).

What is the process

Even when I started drawing my icons for different large projects because of the lack of time provided by the employer, I had to use the same FA, because it already exists and everything seems to be in place. Therefore it was somehow like this:

  1. I drew a layout
  2. I started to cut icons or make sprites, but everything ended almost without starting
  3. Stuck FA for cross-browser compatibility and speed

And the project, perhaps it would have remained a project painted, but recently we opened the market, and at the same time FA#5 became conditionally free, which prompted us to bring our project to the light.

How icons were created

As I said, the history of icons began with drawing them for different projects. The very first, in which the manifestation was directly obvious — the redesign of the site OsbornRus. Then, for sure, I drew a rege-compare icon. And at the moment it has remained almost unchanged. Becoming, in some measure the standard for the rest.

Now, after a decent time, I took up these icons. First I posted them in ai format just on the site. And then the fun began: I started the project Vivaldo — a music player and the compatibility of the site design for the artist.

By the way, the project OsbornRus, unfortunately, has not seen the light at the moment. The site was made on Bitrix, hung, withered and supposedly died. No, I'm lying, after a couple of years he saw the light.

Let's return to reality, in the Vivaldo project, I worked simultaneously on not just one project, but immediately over four.

These are:

  1. Vivaldo
  2. FA-Kit — Bootstrap analog, but more lightweight
  3. PH-Kit — in this project is used a little, since we moved away from the foundation, and the basis is a primer on the WP theme
  4. Icons Rage — free icon set, the hero of this article

So, about the icons

I started simply by drawing a few icons that I used from the project in the project. They were only a few pieces and they had little in common with normal professional icons. Among them were icons such as:

  1. Arrows in all four directions
  2. Chevrons aside
  3. Compare icons for the store
  4. Basket icon
  5. And a few more pieces

Sometimes they were supplemented, but they did not have systems. In extreme cases, icons with flaticon were saving me.

In general, I drew them, drew again and repainted them.

The Magic Grid

While I was looking for information on how to draw these damn icons correctly, I did not find anything sensible. Unfortunately, I have to admit that designers who draw cool — lack systems: pure emotions. It may be cool, but, personally, I am a person who is trying to expose everything to the system.

And then voila, I found the system.

Frankly, when I find a new technique, at first I do not question it (if there is no obvious rubbish), I try and understand.

In this case I came to the following:

Icons grid Rage

And this system, I want to note, has a place to be. Although at the time of writing, I never discovered the true essence of this particular grid. Most likely we will disclose it later, because at the moment we do not plan to stop in the creation of icons. Or we will create our own.

To the pluses of the grid icons can be attributed:

  1. Ease of construction
  2. Scalability
  3. At least some system

In the minus:

  1. The grid is not a panacea when you create an icon font
  2. It is advisable to understand what you are doing

If you want to create your own icon font

What we will describe further is not recommended to be perceived as an unquestioning description of actions, but only as our experience.

In order to correctly display the drawn icons, you need to follow the following recommendations:

  1. You will either have to customize the icons for the width of the area, or customize the width of the area under the icon
  2. For export, draw icons at least 500 by 500 pixels
    On export, you have to either optimize the icon, which can distort it
  3. If you draw icons in the style of lineart, then you can scale to fit the size, well, almost.
    When I drew icons under a scale of 600 to 600, some with an internal stroke, I scaled to a height of 500px (in some cases, to the full height), and with a standard 500px stroke in the middle, the stroke width (in this case — 35px). With a completely external stroke, respectively — 2 strokes of the stroke. 70px. Customize items by the logic of things, for example chevron should probably be less than the list item, but not necessarily. Later this can be corrected in styles.
  4. Before exporting, disassemble the stroke and the overall design, and assemble the contour into one unbroken one.

And now the most important thing: infa weaving, that the first time you will make an iconic font will come out nonsense. Complete. At least close your eyes. And puncture.

So it was with me, the problem areas were dashboard and chevrons with arrows. They became wider than all the rest of the area.

Features of export

General

There is not one service for creating an iconic font, such as iconmoon, but even though the font seems to have an opensource, but I do not want to spill it in the turrets, as the service offers. I did not even begin to understand, but I saw a hint that he [the font] could become public, turned around and left.

Undoubtedly the path that I chose is heavier, on the same iconmoon there is a ton of utilities for customizing each icon individually, and here, using task runners, you are faced with the fact that you must initially correctly calculate everything.

But it is for the better, as I mentioned above — quests with the calculation are the most that is necessary.

And now about export. As the main tool, I chose gulp with add-ons:

  1. Gulp icon-font
    Contains a bundle of tasks processing svg icons, you can implement everything purely on them, but this is not our main task, so maybe next time
  2. Gulp svg-sprites
    In contrast to the font, there are svg sprites, and better characters. They can be called magical use, which creates magic. And is drawn better font.

As we have already indicated, it is necessary either to adjust the width of the area, or to select some multiplicities for which you need to customize the icons, for example, you will have a height of 500px, and width is 500, 450, 175, where under the width you will draw different objects in width. Under the narrowest the chevron or arrow will suit, and under the widest — the icon of the letter.

Experienced, I found out that it's ideal — when you have an icon that occupies the whole area. But here there is one downside, using Adobe CC may be tempted to use the export of objects:

This export will automatically cut the export area to the size of the exported object. But this is bad. You need to be confident at 146% that the size of the object is ideal for the iconic font.

I really do not recommend using this tool. Do the editing areas yourself.

Further about the difference between sprites and icon font:

Export Rage

Gulp iconfont

Here is our config:

gulp.task('iconfont', function(done){
var iconStream = gulp.src(['source/svg/*.svg'])
.pipe(iconfont({ 
	fontName: 'rage-icons',
	normalize: false,
	prependUnicode: true,
	startUnicode: 0xE001,
	//fontHeight: 550,
	formats: ['ttf', 'eot', 'woff','truetype','svg','woff2'],
	copyright: 'iAmStudio',
	centerHorizontally: false,
	//ascent : 50,
	descent : 60,
}));
async.parallel([
function handleGlyphs(cb) {
	iconStream.on('glyphs', function(glyphs, options) {
		// Font css
		gulp.src('source/templates/font-rage.css')
			.pipe(consolidate('lodash', {
				glyphs: glyphs,
				fontName: 'rage-icons',
				fontPath: '../fonts/',
				className: 'rage',
			}))
			.pipe(gulp.dest('dist/css/'))
			.on('finish', cb);
		console.log(glyphs, options);
	});
},
function handleFonts(cb) {
	iconStream
		.pipe(gulp.dest('dist/fonts/'))
		.on('finish', cb);
}
], done);
});

Most of the font generation is in the first iconStream variable:

  1. fontName — the name of the font, the name will go into the links and the name of the fonts themselves
  2. normalize — by default it is disabled, but here I was playing with the sizes
  3. prependUnicode — In this option, both the problem and the rescue suddenly came out. To change the icons (adding, removing) their unicode did not change, you must enable this option. Then the source code will be added at the beginning of the name of the unicode file. This way:
    Экспорт иконок Rage
    The problem, as it turned out, is that the so-called files contradict the concept of «everything at once». After all, I have for such cases one file in the illustrator and the required number of editing areas. So you can see everything at once. And for export, each artboard area needs to be renamed with their names in the resource folder. This is a real problem, because generating symbols (gulp-sprites) names are needed without prefixes. The solution came out crash — I created 2 files for export, one with the name of the unicode installation areas, the other without.
  4. startUnicode — we have become a personal fetish, and in general can really save when you use 2 or more sets of fonts in the project. Just set the maximum value of the previous font and then this one will be set as if from above. In fact, all the same, the fonts are different, but we generally did not come in handy. Made in beauty because in the original is another value not from zeros.
  5. fontHeight — saves if you have small icons and enabled normalize: true.
  6. centerHorizontaly — most likely will not give a result.
  7. ascent — from the field of professional construction of fonts, omitting the font, can save when the font sizes are different, you built on the marks and you have to match it.
  8. descent — lifting the font, too, can help out.
  9. Next is the creation of css styles for the work of icons. We tied the rage class to the i tag in order to separate the font icons from svg with the same class.

Gulp svg-sprites

This method I used because the fonts can be equated to a bitmap image, their drawing is clearly lame, and you have to download several fonts at once, for sure.

SVG characters can be used very conveniently: it's simple and the drawing will be decent. Plus there are a lot of buns, unlike the font, the most common example is that for the svg character you can explicitly specify a stroke in styles or when calling. And at the same time you can use it just like a font, you need to specify:

  1. font-size: 1em — for the parent
  2. height + width: 1em — it is necessary to specify the dimensions, otherwise the icon will be flattened and it will not be visible
  3. fill: currentColor — then the icon will inherit the color property.
gulp.task('symbols', function () {
gulp.src('source/symbols/*.svg')
	.pipe(svgSprite({
		mode:'symbols',
		svgId: 'rage-%f',
		preview: false,
	}))
	.pipe(gulp.dest('dist/'));
});

Config is easier than for a font:

  1. mode — processing mode, you can also choose and sprites, but this is not our case
  2. svgId — %f — in this case it is the name of the file. That's why you can not use export cases with unicode
  3. preview — creates an html file where all the icons are listed.

Almost the end

Why svg is better than font

  1. Drawing
  2. Customization

In general, you can talk for a long time, but it should be noted and the advantages of the font icon, at least this is the low threshold of the user's entry. Connected and use.

Nevertheless, svg does not require much manipulation. It must be connected directly by embedding it in the body in the beginning, so that it works for sure. And then simply call in the construction:

<svg class="rage"><use xlink:href="#rage-name"/></svg>

Important to remember:

  1. If you explicitly specify fill="currentColor" in the symbol code, you can no longer influence it with css by just specifying the color property
  2. Internet Explorer cleans the cache, and Edge does not eat new styles without restarting

We hope this article will help you in your endeavors.