What is IcoMoon?

IcoMoon is an icon solution, providing three main services: Vector Icon Packs, The IcoMoon App, and hosting icons as SVGs or fonts.

Here's how to use it simply

1. Enter the URL: the main page

Go to the homepage of the website:

https://icomoon.io/#home

Click the icoMoon app button in the upper right corner, select the button, and then enter the following interface:

After clicking the import Icons button, add the svg image, and the following interface will appear. The first four icons below are newly added by me. Then click the Generate Font button in the lower right corner, and the following interface will appear.

Then click the download button to download, and after downloading, you can use it in the code

The downloaded file format is as follows:

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.

Reprinted from: http://blog.csdn.Net/goodgirl1991/article/details/50416974

icomoon icon is an awesome and practical open source icon series, its official website address is https://icomoon.io/icons.html

Well, let's introduce how to apply this series of icons to web pages.

Download selected icomoon icon

Click IcoMoon App, enter the page, select the icon you want to import into the web page, and click the edit button, then click the selected icon to edit

After editing, click the generate font button

Click download to download the font style file and get the html escape code of the icon from getCOde

Writing web code

First of all, of course, you need to introduce custom font styles into web pages

[css] view plain copy

@font-face{
font-family:'icomoon';
src:url('icomoon.eot');
src:url('font/icomoon.eot?#iefix') format('embedded-opentype'),
url('font/icomoon.woff') format('woff'),
url('font/icomoon.ttf') format('truetype'),
url('font/icomoon.svg#SofiaProLight') format('svg');
font-weight:normal;
font-style:normal;
}

Then write the html code, and describe the css style of the specified tag, and add the icomoon icon to the tag.

[html] view plain copy

<body>
< div data-icon = "" > </ div >
<divdata-icon=""></div>
</body>

[css] view plain copy

div:after{
font-family:'icomoon';
content : attr (data- icon );
}

Through the above steps, the icon is displayed

Use of IcoMoon Icon Fonts

What is IcoMoon?

1. Enter the URL: the main page

Download selected icomoon icon

Writing web code

Guess you like