uniapp添加阿里字体图标库图标

大家好，欢迎来到IT知识分享网。

字体图标添加

1.需要到阿里矢量图标库添加
2.添加后Unicode下载并替换@/styles/font下文件
3.在线图标方式
复制阿里矢量图标库->我的项目->Unicode->查看在线链接的@font-face并替换iconfont.css的@font-face，并在每个链接前添加https:
3.本地图标方式
iconfont.css中用下方代码替换@font-face

@font-face { font-family: 'iconfont'; src: url('@/styles/font/iconfont.eot'); src: url('@/styles/font/iconfont.eot?#iefix') format('embedded-opentype'), url('@/styles/font/iconfont.woff2') format('woff2'), url('@/styles/font/iconfont.woff') format('woff'), url('@/styles/font/iconfont.ttf') format('truetype'), url('@/styles/font/iconfont.svg#iconfont') format('svg'); } 

4.复制下方代码放到iconfont.css中

text[class*="icon-"], view[class*="icon-"], button[class*="icon-"] { font-family: "iconfont"; font-size: inherit; font-style: normal; } 

5.使用方法

<view class="icon-success-filling" style="color: #0087fe; font-size: 25rpx;"></view> 

注意：如果你用的是uview，请参照这篇文档配置https://www.uviewui.com/guide/customIcon.html