This article tells how to use icomoon import icon, we all know, website and mobile terminal, with ICONS or try to choose this unified way (icon to font).

Some ICONS will be distorted by using image directly. After using SVG to transform the font, you can control the size and color of ICONS by style, and there will be no jagged images due to magnification.

So this is one of the things you need to master in front end development.

Icomoon official website

Link: icomoon. IO/app / # / selec…

The picture above shows the entire interface of icomoon, which is very simple and straightforward.

Member users can store icon information by account; Non-member users can only store the icon information locally through the browser, so ordinary users try to edit the icon library in the same browser, if necessary, export all SVG ICONS for backup, so that they will not lose the imported ICONS each time.

Two, use method

1. Generate SVG images as font ICONS

Click “Import ICONS” in the upper left corner and a popup window will appear. Select upload for the SVG to be uploaded. After uploading, select the icon we uploaded and then click Generate Font in the lower right corner to generate the Font icon.

2. Set files, name ICONS, dehydrate, rotate, zoom in/out and other operations

The following figure 1

The following figure 2

3. Download font files

Click on the lower right corner to download the font file. The file name is your font name +version as shown in “Figure 2”.

As shown in “Figure 2”, I named Font Name NFT and downloaded the package Name nft-v1.0.zip. After unzipping, you can see that the file directory looks like the following:

Contains ie7 compatible styles, SCSS files, as well as fonts folder and selection.json. Selection. Json is important and will be needed to append ICONS later.

4. Specific methods of use

The entire IComoon file can be imported into the project file and referenced by path. You can also just use files in the Fonts folder and style.css.

The method called in the page is shown as follows:

It’s too simple to repeat.

5. Append ICONS

Now, remember when we highlighted selection.json?

  1. Start by finding selection.json in the IComoon folder
  2. Go to the IComoon website and click on the IComoon App
  1. Click “Import Icons” and Import our selection.json file. You will see the previous Icons, and then choose to add the Icons you want. Finally, click Dowload to download the font icon.
  2. Download the IComoon font package, delete and replace the previous IComoon package, delete the fonts file in the project, and add new fonts; Open demo. HTML in ICommon again, find the newly added font icon, double click to copy and paste it to the required place in HTML, open the browser to view, the icon displayed on the completion.

6. Precautions

  1. When we use font ICONS in projects, we usually use labels.
  2. When using your own icon, declare it first, then reference it, then call it in the label.
  1. In order to keep adding font ICONS later, be careful not to always delete the IComoon package, either by saving it elsewhere or by referencing it all into your project