4步完成小程序图标添加

 

开发小程序如何加入字体图标?字体图标应该放在哪个文件?

一、添加字体图标到项目

登陆阿里图标库,选择适合你项目所需要的字体图标,然后添加到一个项目里,这个步骤像我们平时做项目一样。 例如:

二、下载图标项目文件

添加完成你所需要的字体图标之后下载解压,这跟我们平时往web项目中添加的步骤一样,不同的是我们不需要把整个下载下来的文件都加到项目中。 例如:

三、替换css文件头部

把下载下来的iconfont.css文件中的字体路劲替换成Unicode中的这段代码,目的是更换字体图标链接。 例如:

四、复制iconfont.css内容到.wxss文件中

最后我们只需要把iconfont.css的内容复制到所需要的引用的.wxss文件中就可以了,无需引入整个文件夹就可以引用,比我们平时做项目过程中引入字体图标更加简单。 例如把替换后的文件复制到.wxss(本例子是示范作用,我只复制了开头一小段代码):

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
@font-face {
font-family: 'iconfont'; /* project id 1226269 */
src: url('//at.alicdn.com/t/font_1226269_8kor7xv2lf5.eot');
src: url('//at.alicdn.com/t/font_1226269_8kor7xv2lf5.eot?#iefix') format('embedded-opentype'),
url('//at.alicdn.com/t/font_1226269_8kor7xv2lf5.woff2') format('woff2'),
url('//at.alicdn.com/t/font_1226269_8kor7xv2lf5.woff') format('woff'),
url('//at.alicdn.com/t/font_1226269_8kor7xv2lf5.ttf') format('truetype'),
url('//at.alicdn.com/t/font_1226269_8kor7xv2lf5.svg#iconfont') format('svg');
}
.iconfont {
font-family: "iconfont" !important;
font-size: 16px;
font-style: normal;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
.icon-renxiang:before {
content: "\e600";
}

Html:
<icon class='iconfont icon-meishu'></icon>
本文为博主原创文章,知识共享,开源精神,转载注明出处。