三分钟教会你自制 iconFont 字体图标库

app开发的时候，我们大多会用到字体icon，下面我们就讲解一下，如何自定义生成 iconFont

一般情况，我们优先选择在 下载我们需要的矢量icon的svg格式, 如果这里没有你需要的icon，也可以自己切图把png格式的图片转化为svg;

svg 导入并生成 font

导入多个svg图片

点击右下角

记好每个icon的code

然后点击 download

如图：

然后我们写 less（或者css），定义这些icon的样式：

@assets: ../assets/fonts;
@version: ?v=1.1.0;

@font-face {
    font-family: icomoon;
    /* 自行安装第三方字体图标库 */
    src: url(@{assets}/icomoon.eot@{version});
    src: url(@{assets}/icomoon.woff@{version}) format(woff),
    url(@{assets}/icomoon.ttf@{version}) format(truetype),
    url(@{assets}/icomoon.svg@{version}) format(svg);
    font-weight: normal;
    font-style: normal;
}

/* 根据第三方字体图标库编写 */
/* 举例：fa 就是 prefixClass 的值，下面的的图标 css class 命名都要用 fa- 开头  */
.fa {
    display: inline-block;
    /* 以下的 font 与上面 @font-face 的 font-family 要一致*/
    font: normal normal normal 14px/1 icomoon;
    font-size: inherit;
    text-rendering: auto;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

.fa-home:before {
    content: "e900";
}

.fa-doc:before {
    content: "e903";
}

.fa-knowledge:before {
    content: "e906";
}

.fa-discuss:before {
    content: "e901";
}

.fa-question:before {
    content: "e902";
}

然后就可以把这个less引入到我们的入口文件里面；

调用举例：

<span className="fa fa-home"></span>
/**更改大小和颜色**/
 <span className="fa fa-home" style="font-size:30;color: blue"></span>

实际效果：