icomoon! Powerful web font icon maker/web Font Usage example

icomoon! A builder that can create custom icons (fonts) through personalization! You can also convert an SVG image to a Web font

Icomoon is a free service that allows us to create custom icon or icon fonts by using different settings .
Of course, the website also has the resources to pack the download!
Including most popular free icon sets (search in its library), you can select any one of these icons to download.
At the same time, it will provide two ways to download: Photo version and font version!

The image version is a PNG format that has been processed by CSS sprites technology, and the font version is available in a variety of formats (EOT,SVG,WOFF,TTF).
In addition, in addition to the icons designed by other designers, Icomoon also has its own free collection of large icons, which are great.

website address: http://icomoon.io/app/

How to use:

1. Select the icon

2. Download font library, copy style

3. Use in the project

@font-face{font-family:' Icomoon ';src:url ('.. /myfonts/icomoon.eot ');src:url ('.. /myfonts/icomoon.eot? #iefix ') format (' Embedded-opentype '), url (' ... /myfonts/icomoon.woff ') format (' Woff '), url ('.. /myfonts/icomoon.ttf ') format (' TrueType '), url ('.. /myfonts/icomoon.svg#shejidaren ') format (' SVG ');Font-weight:Normal;Font-style:Normal;}. Icon-qq:before{content:"\e900";}. ICON-QQ{font-family:Icomoon;Color:Gray;width:30px;Height:30px;Line-height:28px;text-align:Center;font-size:20px;Display:Inline-block;Border:1px solid Gray;Border-radius:50%;transition:Transform Ease 0.2s;}. Icon-qq:hover{Color:Red;Border:1px solid Red;cursor:Pointer;Transform:Scale (1.1); }

   <data-icon= "QQ"  class= "Icon-qq"></span  >

Show Results:

icomoon! Powerful web font icon maker/web Font Usage example