uniapp使用阿里图标(入坑)
程序员文章站
2022-03-31 22:37:56
...
准备
下载阿里图标到本地(https://www.iconfont.cn/),uniapp不支持symbol格式
校验
https://transfonter.org/点击ADD fonts 添加下载的 iconfont.ttf 文件,配置如下图,点击convert保存,Download。
配置
把阿里图标的iconfont.css 复制到项目里,删除@font-face{ }里的代码,把下载下的stylesheet.css的文件复制到iconfont.css文件里。
使用
main.js全局引入
import './static/common/icon/iconfont.css'//导入图标
界面使用icon
<text class="iconfont icon-search"></text>
注意
使用时要记得加前缀iconfont,不然只是一个小框框。
推荐阅读
-
uniapp之w-picker使用采坑
-
react使用阿里字体图标
-
使用pycharm开发web——django2.1.5(一)入坑尝试第一步,基本搭建
-
阿里图标库iconfont入门使用
-
阿里图标素材在vuecli中的使用(.svg方式)
-
Angular 从入坑到挖坑 - Router 路由使用入门指北
-
在webstorm开发微信小程序之使用阿里自定义字体图标的方法
-
Android开发使用阿里巴巴文字库踩过的坑
-
微信小程序使用彩色图标(阿里巴巴矢量图标库)(炒鸡详细)
-
解决uniapp项目中使用vant Weapp图标组件报错问题(Module build failed from ./node_modules/postcss-loader/src/index)