不得不说，日了狗了。现在前端更新得很快，去年20年找到的一些博客解决的办法都不管用了。自己摸索了几小时才成功。现在马上记录一下，不对之处留言提出。不懂的留言提问即可。
本文章是针对 导入icon失败 这个问题 提供的解决方法。其他问题请移步别的博客
第一步:
- 去al 爸爸那里注册，下载自己喜欢的 icon。 并且添加到自己的项目里
iconfont-阿里巴巴矢量图标库
1.png
然后点击图中的在线连接。下载出自己的 font-face 。还有本地代码也要下载。
然后将iconfont.css 里边的 @font-face替换掉
(在每个 //at.alicdn 前边添加 https:)
具体的这里不说，别的博客很多
第二步:
- 把下载的所有文件放到自己的 uni-app common文件夹 里边
- 然后全局安装 依赖包，确保能实现 彩色的依赖包，不然你的图标就是黑白色的而已。命令如下:
cmd 运行此命令 npm install -g iconfont-tools
-
找到安装的 iconfont-tools （一般在自己的 node 的目录下）
path.png
-
把 阿里下载的 icon 里边的 iconfont.js 文件复制到 这个iconfont-tools 文件夹下
3.png
4.png
-
cmd 进入当前 iconfont-tools 文件夹下，执行 iconfont-tools 命令
image.png
该命令会自己去找 iconfont.js 文件，找不到会报错。如果成功就有文件夹出来
5.png
第三步
-
然后把里边的 iconfont-weapp-icon.css 文件也拿出来放到 uni-app common 目录下，具体位置 自己定。一般都是和icon一起的。
6-this is my folder.png
- 在App.vue 里导入这两个 文件（不需要在 main.js里导入）
@import url("common/icon/iconfont.css"); （用于黑白色使用）
@import url("common/icon/iconfont-weapp-icon.css"); (用于彩色使用)
具体是黑白色还是彩色看项目。打包的时候注释掉其中一个即可，这里是因为演示效果才两个都导入
然后调整一下字体大小。
在 iconfont.css 里边把font-size 改一下。用于调整icon图标大小
.iconfont {
font-family: "iconfont" !important;
font-size: 110rpx;
font-style: normal;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
在App.vue 的 style 里边加上
.t-icon{
width: 120rpx !important;
height: 120rpx !important;
}
- 随便找个页面 放入自己的 icon
<view>
<icon class="iconfont icon-XXX"></icon>
</view>
<view >
<view class="t-icon t-icon-XXX"></view>
</view>
这里使用两种 标签 icon 和 view 都能成功 。虽然 icon 也能显示，但是 uni-app 在浏览器
console 那会一直报错。看着就很不爽，这里仅仅是演示。
另外:
彩色图标 记得一定要使用 t-icon 和 t-icon-XXX ，不然无法显示
结果如图。大小经过调整也好看了
最后如果有别的问题，欢迎留言提问
result.png
网友评论