引入字体图标

2024-02-04  本文已影响0人  缘之空_bb11
  1. 去阿里图标图寻找合适的图片: https://www.iconfont.cn
  2. 添加到购买到项目并下载下来
  3. 在项目中的 static 下创建 自定义 font 目录用来存放字体, 并添加 .css , .ttf, .woff, .woff2 这 4 个文件,
  4. 修改.css 文件中的路径, 例如 url('/iconfont.woff2?t=1701223396774') format('woff2')
    改成 url('@/static/font/iconfont.woff2?t=1701223396774') format('woff2'), 使其这次路径下能找到对应的文件
  5. 在项目中就可以使用了, 注意使用时 class = "iconfont icon-riqi"
  6. 其中的 XXX 图片名字可以在 .css 文件里,找到对应的 .icon-riqi:before , 使用前面就是图片名称

注意:是不是按照上面的流程没有显示? 那是因为没有引入文件, 在App.vue中的style引入文件,例如: @import url("static/font/iconfont.css"); 使其适应于每个文件

项目使用示例:

<view class="iconfont icon-riqi">书籍</view>
上一篇 下一篇

猜你喜欢

热点阅读