引入字体图标
2024-02-04 本文已影响0人
缘之空_bb11
- 去阿里图标图寻找合适的图片: https://www.iconfont.cn
- 添加到购买到项目并下载下来
- 在项目中的 static 下创建 自定义 font 目录用来存放字体, 并添加 .css , .ttf, .woff, .woff2 这 4 个文件,
- 修改.css 文件中的路径, 例如 url('/iconfont.woff2?t=1701223396774') format('woff2')
改成 url('@/static/font/iconfont.woff2?t=1701223396774') format('woff2'), 使其这次路径下能找到对应的文件 - 在项目中就可以使用了, 注意使用时 class = "iconfont icon-riqi"
- 其中的 XXX 图片名字可以在 .css 文件里,找到对应的 .icon-riqi:before , 使用前面就是图片名称
注意:是不是按照上面的流程没有显示? 那是因为没有引入文件, 在App.vue中的style引入文件,例如: @import url("static/font/iconfont.css"); 使其适应于每个文件
项目使用示例:
<view class="iconfont icon-riqi">书籍</view>