个性化阅读
专注于IT技术分析

在微信小程序中添加字体图标的方法

最近开始开发微信小程序,遇到了一个问题,怎么往微信小程序项目里添加字体图标呢,比如,我要添加阿里图标的字体图标,那些字体文件又应该放到哪个目录下面呢?下面来帮大家解决这个需要的问题。

先给效果图大家看看:

效果图

一、添加字体图标到项目

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

例如:

添加图标到项目

二、下载图标项目文件

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

例如:

下载图标

三、替换css文件头部

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

例如:

unicode链接

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

最后我们只需要把iconfont.css的内容复制到所需要的引用的.wxss文件中就可以了,无需引入整个文件夹就可以引用,比我们平时做项目过程中引入字体图标更加简单。

例如把替换后的文件复制到.wxss(本例子是示范作用,我只复制了开头一小段代码):

@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-x:before {
content: "\e600";
}

HTML:

<icon class='iconfont icon-y'></icon>

微信小程序中添加字体图标和我们平时web项目添加图标其实差不多,就是路基的不同,要换成Unicode的路径,下载下来的字体不需要全部添加到项目文件中,还有就是小程序中的标签也不同,这个需要注意一下。

赞(0) 打赏
未经允许不得转载:srcmini » 在微信小程序中添加字体图标的方法
分享到: 更多 (0)

评论 抢沙发

评论前必须登录!

 

觉得文章有用就打赏一下文章作者

微信扫一扫打赏