小程序引入iconfont踩坑

发表于 | 分类于

小程序引入iconfont踩坑

  • 在阿里巴巴把需要的图标加入购物车
  • 添加到项目，没项目新建一个
  • 下载到本地

  • 找到iconfont.css把代码复制到小程序项目到app.wxss或者拷贝到static,通过css方式引入不想全局引用，可单独在对应wxss中使用

    1
    @import "./static/iconfont/iconfont.wxss"

  • 替换iconfont.css中的@font-face为上面的生成代码

  • 使用

    1
    <text class='iconfont icon-jiazai'></text>

  • 注意是iconfont不是icon 坑了我几个小时，还是踩坑太少

  • 每次重新添加icon到项目需要重新替换@font-face为上面的生成代码，并且把新添加的图标加入iconfont.wxss

    1
    2
    3
    4
    5
    6
    7
    8
    9
    @font-face {
      font-family: 'iconfont';  /* project id 1274544 */
      src: url('//at.alicdn.com/t/font_1274544_5eej6szwu1j.eot');
      src: url('//at.alicdn.com/t/font_1274544_5eej6szwu1j.eot?#iefix') format('embedded-opentype'),
      url('//at.alicdn.com/t/font_1274544_5eej6szwu1j.woff2') format('woff2'),
      url('//at.alicdn.com/t/font_1274544_5eej6szwu1j.woff') format('woff'),
      url('//at.alicdn.com/t/font_1274544_5eej6szwu1j.ttf') format('truetype'),
      url('//at.alicdn.com/t/font_1274544_5eej6szwu1j.svg#iconfont') format('svg');
    }

  • 看起来很简单，可自己就是犯了很多低级错误rve