uview 扩展iconfont 图标库，中间碰见的一个小坑

中间怎么下载怎么使用 我就不说了 官网说的很清楚了
https://www.uviewui.com/guide/customIcon.html
其实官网的文档中描述的是 通过使用base64的形式引入的，你也可以把下载下来的图标转换成base64的格式 然后引入进去
有个在线转换的网站
https://transfonter.org/。 https://transfonter.org/

主要是 引入字体的那里有个小问题 就是 他那个字体必须的是相对项目的根路径 否则就会报错,说找不到
我的项目目录是
/static/fonts/iconfont.woff
/styles/styles/iconfont.css
之前写的相对路径
这个好像官网也并没有说明

@font-face {
  font-family: "custom-icon"; /* Project id 2915025 */
  src: url('../fonts/iconfont.woff?t=1636012895736') format('woff');
}

然后就是一直报找不到，

@font-face {
  font-family: "custom-icon"; /* Project id 2915025 */
  src: url('static/fonts/iconfont.woff?t=1636012895736') format('woff');
}

实际效果 我找了两个银行的图标 试了试

<u-icon name="shncsyyh" custom-prefix="custom-icon" size="80" color="blue"></u-icon>

<u-icon name="beijingyinhang" custom-prefix="custom-icon" size="80" color="blue"></u-icon>

关注我 持续更新前端知识。

最后

以上就是勤劳小蝴蝶为你收集整理的uview 扩展iconfont 图标库，中间碰见的一个小坑的全部内容，希望文章能够帮你解决uview 扩展iconfont 图标库，中间碰见的一个小坑所遇到的程序开发问题。

如果觉得靠谱客网站的内容还不错，欢迎将靠谱客网站推荐给程序员好友。