• 设为首页
  • 点击收藏
  • 手机版
    手机扫一扫访问
    迪恩网络手机版
  • 关注官方公众号
    微信扫一扫关注
    迪恩网络公众号

mpvue小程序开发之iconfont图标引入

原作者: [db:作者] 来自: [db:来源] 收藏 邀请

背景:

 mpvue进行小程序项目开发时候,会有很多图标需求,但是小程序官方提供的icon图标库实在有限而且也不利于调样式,所有想到和之前前端项目一样引入iconfont。

图标加入购物车及项目

 

下载到本地,解压以后的文件夹列表如下:

修正:只需要 复制 iconfont.css文件就可以了,其他的文件不需要

把红框中的部分 粘贴到 自己的项目中(复制 iconfont.css就可以了),记得放在 static文件目录下

因为字体图标也属于静态资源的一部分。注意:拷贝到自己项目后,将iconfont.css@font-face部分换成之前复制的带有alicdn的代码。

 

在项目引入css路径

App.vue style开头引入:

 

@import '../../../static/iconfont.css' //  若css在static中,要加..,不然会报错

使用字符图标就可以在项目里显示你想要的图标啦

<i class="iconfont icon-fangdajing"></i>

备注事项:

做项目的时候,直接引入cdn链接的方式,在项目里面好像iconfont 字体不起效果,直接改成本地加载的方式反而来做可以显示出图标来,后期有时间再查找一下原因


鲜花

握手

雷人

路过

鸡蛋
该文章已有0人参与评论

请发表评论

全部评论

专题导读
上一篇:
小程序事件参数传递发布时间:2022-07-18
下一篇:
微信小程序报错:Expecting'EOF','}',',',']',gotINVALID发布时间:2022-07-18
热门推荐
阅读排行榜

扫描微信二维码

查看手机版网站

随时了解更新最新资讯

139-2527-9053

在线客服(服务时间 9:00~18:00)

在线QQ客服
地址:深圳市南山区西丽大学城创智工业园
电邮:jeky_zhao#qq.com
移动电话:139-2527-9053

Powered by 互联科技 X3.4© 2001-2213 极客世界.|Sitemap