Use IcoMoon to insert HTML icon

In the preparation of the site's HTML pages, or anything else, we need to use some landscaping icon to display
for example:

Implementation steps

First, enter icomoon download icon

https://icomoon.io/app/#/select

1, select the icon required

2. Click Generate Font

3, click download

4, extract iconmoon.zip

After the download is complete to get icomoon.zipthe file
unpack icomoonfolder
contents as follows

Second, the deployment to the project

Copy all files to the project directory here

Third, the use of examples

In my new demo01.html A Case Study

1, the new demo01.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>demo01</title>
</head>
<body>

</body>
</html>

2, import css file

<link type="text/css" rel="stylesheet" href="source/font/style.css">

3, see the icon code

After we select the icon, generate Web pages can view icon code
Click get code

to view usage and icon code

can extract out before, copied to the project directory style.cssin icon view has been introduced

* here can be format beautification of the icon style to use css

4, add icons in html

<span class="icon-home2"></span>

5, display

Published 35 original articles · won praise 1 · views 1843

Guess you like

Origin blog.csdn.net/qq_40672635/article/details/104746781