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

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

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

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

1571900747688

svg 导入并生成 font

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

1571898904170

导入多个svg图片

1571898834932

点击右下角

1571898949883

记好每个icon的code

1571899023086

然后点击 download

如图:

1571899147150

然后我们写 less(或者css),定义这些icon的样式:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
@/images: '..//images/fonts';
@version: '?v=1.1.0';

@font-face {
font-family: 'icomoon';
/* 自行安装第三方字体图标库 */
src: url('@{/images}/icomoon.eot@{version}');
src: url('@{/images}/icomoon.woff@{version}') format('woff'),
url('@{/images}/icomoon.ttf@{version}') format('truetype'),
url('@{/images}/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引入到我们的入口文件里面;

调用举例:

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

实际效果:

1571900156424

打赏
  • 版权声明: 本博客所有文章除特别声明外,均采用 Apache License 2.0 许可协议。转载请注明出处!
  • © 2014-2020 Alex Wong
  • Powered by Hexo Theme Ayer
  • PV: UV:

请我喝杯咖啡吧~~~

支付宝
微信