uniapp项目添加阿里图标库字体图标（图标在手机、浏览器均可查看）
前言
提示：本篇文章正文内容分为:
- 给uniapp项目导航栏添加字体图标；
- 在uniapp项目中使用字体图标。
一、给uniapp项目导航栏添加字体图标
1：登录阿里巴巴矢量图标库：https://www.iconfont.cn/
2：新建项目，添加任意图标
3：下载字体图标信息，并解压，解压后的文件夹里，iconfont.css和iconfont.ttf这里是需要用到的
解压后：
4：将上面两个文件放在项目static文件夹下面：
5：在阿里巴巴矢量图标库项目里的Unicode下，点击查看在线链接，便会出现Unicode代码，在项目里打开iconfont.css文件，将Unicode这段代码覆盖掉iconfont.css文件里@font-face里面的内容，最后在 //at 前面加上https:
**2021.08.08更新：直接替换查看后最新的在线链接，在图标库的项目设置里可以勾选需要的格式， 例如：彩色图标等，
要在手机上查看得到，最后在 //at 前面加上https:
@font-face {
font-family: ‘iconfont’; /* Project id 1667012 /
src:
url(’//at.alicdn.com/t/font_1667012_wsn4yi6d8f.woff2?t=1628406260877’) format(‘woff2’),
url(’//at.alicdn.com/t/font_1667012_wsn4yi6d8f.woff?t=1628406260877’) format(‘woff’),
url(’//at.alicdn.com/t/font_1667012_wsn4yi6d8f.ttf?t=1628406260877’) format(‘truetype’);
}*
6：打开项目里的pages.json文件，并使用相应的字体图标和路径。注意：text里面的 u 前缀不可省略，字体图标路径是文件iconfont.ttf的路径。
效果展示：
二、uniapp项目文件中使用字体图标
方式1： 在app.vue文件的style样式里面引入：
@import url("@/static/font/iconfont.css");
方式2：在main.js中引入：
若出现提示：App平台 v3 模式暂不支持在 js 文件中引用”@/static/font/iconfont.css” 请改在 style 内引用，则请改用方式1的引用方式
import "@/static/font/iconfont.css"
最后，引入样式后在文件中使用：
<i class="iconfont icon-xiaoxi1"></i>
class里面的 icon-xiaoxi1等字体图标名和我们项目里面字体图标库里的font-class名是一致的
效果展示：
淩亂°似流年
谁借莪１个温暖的怀抱￠
╰+攻爆jí腚メ
系统管理员
小鱼儿
还没有评论，来说两句吧...