How to add vector icons to web font files in web page production

A bitmap image will appear blurry when the image is enlarged, but a vector image will not. Therefore, more and more people are starting to use vector graphics as web icons. Many people will encounter a situation where they go to the website to download a font file with some vector icons. In the later development, the icons need to be constantly updated and added. If you continue to download ttf font files, it will take up a lot of space, and you will have to download several files to add an icon. Next, I will explain to you how to add icons to the original font file.

First, I recommend two websites with vector icon libraries.

Alibaba vector icon library http://iconfont.cn/

Vector image library in Google Chrome https://icomoon.io/

The first part introduces how to find the icons you need

First, go to the website: Alibaba Vector Icon Library http://iconfont.cn/

Enter the required icon name in the search box, such as "Homepage" or "Strategy", and confirm.

Find the icon you need, move your mouse over it, and select the "shopping box" in the lower left corner.

In the upper right corner of the "Storage Shelf", a favorite icon will appear

Search for "strategy" again, find the icon, and put it on the "storage shelf".

Click "Login" and select a login method

Now move your mouse to the "Shelf" and click "Save as Project". Click "Save"

The second part is about how to add the previous icons to an existing font file.

Now find the font file "new-iconfont.ttf" we already have and open it with the "fontlab" software

After opening it, you can see the icons in the ttf font file. Each icon has its own Unicode code point, because the Unicode of each icon is equivalent to its own "ID card". When an external file needs to use the icon in it, it needs to use this "ID card".

Double-click one of the icons and you can clearly see the "Unicode" on the icon. This icon is "E808"

After understanding the existing Unicode encoding of the ttf font file itself, if the Unicode encoding of the selected icon in the Alibaba gallery is the same as it, click the Modify button in the lower left corner to modify it.

After confirming the modification, click "Download to Local", unzip it, and several font files and css files will appear.

Now you can use Fontlab software to open the ttf file

Select the two icons you want to add and click "copy" on the right mouse button. Then return to the previously existing font file

Select the last icon, right-click and select "Append Glyphs" to add the required icons.

The addition is complete here. Use the shortcut key Gtrl+Alt+G to save it as a ttf file

The above is all the content about how to add vector icons to web font files in web page production. I hope it will be helpful to everyone. For more content, please continue to pay attention to 123WORDPRESS.COM