iconfont Add icon (add new icon to the icon library of the original project)

Requirements: Pick up projects developed by others halfway. Since the project has generated some original icons, and we have not joined the other party's project team, we can only create a new project by ourselves, and then add the required icons to the project. Generate the corresponding iconfont.css file and add it to the original project, without further ado, steps:

1. Since iconfont is used, be sure to find the icon and add it to the project. iconfont is an icon vector library of Ali,

  Address: https://www.iconfont.cn/    , not much to say about login, you can log in with your Weibo account.

2. Find the icon you need and add it to your project. If there is no project, you can create a new project.

 

3. The next step is to introduce our new icon into the original project, find the iconfont folder in the project, if you can’t find it, search the iconfont.css file globally, you can see that the original project already has iconfont.css, etc. Waiting for the file, and how do we import it?

Change the names of the three files after decompression to iconfont.ttf , iconfont.woff , iconfont.woff2 to your own name (whoever will name it), and then copy it to the project iconfont.

 4. After copying, open the iconfont.css file and paste the corresponding @font-face code

 

5. Add the corresponding icon code to iconfont.css.

6. In this way, the new icon can be used.

 End: There are many ways to apply iconfont. If there are few icons, or for temporary use, it is easier to download them directly as pictures. . .

Guess you like

Origin blog.csdn.net/qq_42174597/article/details/128837855