Explain in detail how to use icomoon to generate font icons and apply them

Recently, a lot of projects have used font icons. Everyone knows that font icons can be scaled arbitrarily without distortion, and the number of requests is greatly reduced, which is very easy to use. The following will explain how I generate font icons and apply them based on the .svg file provided by the artist.

With the help of an online generator: https://icomoon.io/app/#/select

1. Enter the URL: the main page


2. Create a new atlas


3. Add .svg pictures (you can use ready-made or customized ones)

Use the ready-to-click Add Icons in red on the page...

Use custom drag and drop directly into the atlas to add



4. Generate font file

(1) Select the icon to be generated (free choice)

(2) Click on the bottom: "Generate Font F"


can be named freely


5. After the modification is completed, click Generate Font


Download to zip file:




Use: Put the entire contents of the fonts folder and the style.css file into the corresponding project.


The font can be added by adding the name of the class class generated under the css file to the node corresponding to the html.

Of course, you also need to set font-size to add fonts, and you can also set color to change its color according to the actual situation.



Corresponding instance download address: http://download.csdn.net/detail/u013938465/9434357


Guess you like

Origin http://43.154.161.224:23101/article/api/json?id=325365102&siteId=291194637