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


    背景:

     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 字体不起效果,直接改成本地加载的方式反而来做可以显示出图标来,后期有时间再查找一下原因

  • 相关阅读:
    VUE学习一,安装及Hello World
    609. 在系统中查找重复文件
    451. 根据字符出现频率排序
    面试题 10.02. 变位词组
    142. 环形链表 II
    面试题 16.24. 数对和
    151. 翻转字符串里的单词
    1207. 独一无二的出现次数
    80. 删除排序数组中的重复项 II
    1365. 有多少小于当前数字的数字
  • 原文地址:https://www.cnblogs.com/style-hyh/p/10429535.html
Copyright © 2020-2023  润新知