作者：红颜内 | 来源：互联网 | 2023-09-14 11:59
uni-app引入阿里图标【单色】
上期简单的介绍了一下uni-app相信大家根据官方文档都已经了解的差不多了，创建项目应该是没有什么问题了，那么这期我就讲一下在uni-app怎么引入阿里图标——单色
之前文章中我有讲到小程序原生引入阿里图标，如果大家感兴趣的话可以看一下。uni-app引入阿里图标和小程序原生引入还是很不一样的
话不多说，开始！
第一步：进入阿里图标官网https://www.iconfont.cn/选择自己需要的图标，当然你也可以让你们ui把设计图上的图标上传到阿里图标上
第二步：添加至项目
点击购物车出现
点击添加至项目后出现文件夹选择或者是新建一个文件夹，在这里我就先新建一个文件夹
点击确认以后，就可以看到自己的文件夹里的内容，在这看到的就是自己所有icon的项目
上面是阿里图标的基本操作，我又啰嗦了一遍儿，怕有的新同学还不会用，下面进入主题
第三步：下载至本地，解压download 文件夹
点击下载至本地，并且在本地解压
解压出来的文件目录请看下图：
第四步：在项目中引入iconfont.css
第五步：把iconfont.ttf转成base64
转base64网站链接https://www.giftofspeed.com/base64-encoder/
打开链接后点击选择文件夹然后如下图
第六步：把base64复制到项目iconfont.css中并替换文件中@font-face内容
刚开始iconfont.css的内容如下
需要替换成下面代码，因为什么要换这里不多讲，你换上就对了
@font-face {font-family: &＃39;iconfont&＃39;;src: url(data:font/truetype;charset=utf-8;base64,base64复制内容)format(&＃39;truetype&＃39;);
}
注意：base64复制内容不可和前面base64,换行
base64复制内容要换成刚转换的内容如下
换后如下图
第七步：App.vue文件中的
完成上面步骤，配置就完成了，下面使用就好了
第八步：页面中使用
<template><view class="icon"><i class="iconfont icon-chart-area" style="font-size: 50rpx;"></i><i class="iconfont icon-chart-line" style="color: red;"></i><i class="iconfont icon-chart-bar" ></i><i class="iconfont icon-display-code"></i><i class="iconfont icon-display-arrow-right"></i></view>
</template><script>
</script><style scoped lang="less">.icon{padding: 50rpx;i{padding: 20rpx;}}
</style>
解释：
<i class="iconfont icon-chart-area" style="font-size: 50rpx;"></i>
iconfont: iconfont对应的是iconfont.css中
.iconfont {font-family: "iconfont" !important;font-size: 16px;font-style: normal;-webkit-font-smoothing: antialiased;-moz-osx-font-smoothing: grayscale;
}
icon-chart-area 对应的是iconfont.css中
.icon-chart-area:before {content: "\e78f";
}
那么可能就有同学问了怎么找到对应的icon名字icon-chart-area
可以去阿里图标你的项目文件中找到对应的 e78f(只是举例其中一个)，
这样就可以找到 对应的class名字了
图标的样式和字体设置一样
第九步：看效果
效果如下：
以上uni-app引入阿里图标就结束了 ，希望能够给大家带来帮助！如有什么问题及时反馈。
京公网安备 11010802041100号