How to make a small icon-font icon

1, first of all can go iconfont.cn Alibaba vector font library download icon you want (select the format for the SNG
format).

2, open iconmoon this site (like this), then click on the upper right corner of the Iconfont App
figure below:
image description

3, above a purple Import IconsClick Upload your next good SVGicon.

4, upload good SVGicon appears below Untitled Set, and then select the top have a similar 笔shape of the icon, click into the edit. Explain the above selector.
。鼠标箭头Represents 选择图标
。垃圾桶represents 删除图标, generally opt for trash, 点一下图标就可删除
。十字箭头expressed变换位置

5, the editing, the first Tagsis that you can enter the name you want to find when this icon, the second input box will be used when the code references 名字. I created the flower, so named flower, and then close the editor, do not point to download.

6, then click on the bottom right Generate Font F, is entering the page, then click the red circle in the gear, the next step editor
image description

7. Once there, you need to modify the following.
image description

8, Font Namerepresents a moment introduced fonts need to be introduced 样式名称
Class Prefixredistributes style prefix, suffix if not set, then introduced to the style nameicon-flower

9, selection Support IE 8and Generate preprocessor variables for： LessandUse a class

Then fill in the back of the box css need to be introduced 类名, I wrote .wyhiconthe name of
10, and then close the editor, click on 右下角download下载the font.

11, after the download is complete, press solution. Modify style.csscontent

   /* 我们需将下面的url路径改为引用的fonts文件夹的路径，根据实际情况修改 */
   @font-face {
   font-family: 'wyhicon';
     src:  url('../fonts/wyhicon.eot?q06q0o');
     src:  url('../fonts/wyhicon.eot?q06q0o#iefix') format('embedded-opentype'),
         url('../fonts/wyhicon.ttf?q06q0o') format('truetype'),
         url('../fonts/wyhicon.woff?q06q0o') format('woff'),
         url('../fonts/wyhicon.svg?q06q0o#wyhicon') format('svg');
     ...
   }
   /* 下方这个类中的字体样式需要加上以下代码中的font-family */
   .wyhicon {
     font-family: 'wyhicon',PingFangSC-Light,'helvetica neue','hiragino sans gb',arial,'microsoft yahei ui','microsoft yahei',simsun,sans-serif !important;
     ...
   }
   .icon-flower:before {
      content: "\e900";
   }

I.e. the original style.css样式in .wyhiconaddition at a font-family:
'wyhicon', PingFangSC-Light, 'Neue Helvetica', 'Hiragino Sans
GB', Arial, 'YaHei Microsoft UI', 'Microsoft YaHei', simsun, sans- serif
! Important;

11, then reference in your html document on it

<!-- 首先引用你的css样式 -->
<link rel="stylesheet" href="./css/style.css" type="text/css">
<!-- 然后引入你的字体文件就ok了 -->
<i class=" wyhicon icon-flower"></i>

Guess you like