uni-app使用iconfont保姆级教程

1.背景

uniapp中自带的icon很少，不管哪个UI框架都有这个问题，最好就是引用来自iconfont之类的自定义项目文件，我见过很多项目是将文件直接下载下来使用，弊端是操作麻烦，颜色不可修改，只能用已下载的颜色，最好的方式当然是使用字体文件来实现，这里就详细说下操作流程

2.方案步骤

步骤主要分两块，一块是iconfont上的项目管理，一块是本地uniapp项目中的配置

2.1.iconfont端

iconfont端主要分几步：
1.创建项目
2.选择图标
3导出字体文件

2.2.项目端引用

项目端引用主要分3步
1.文件下载
2.CSS引用
3.CSS引用路径修改

3.步骤详情

3.1iconfont项目端

1.创建项目
在顶部【资源管理】中选择【我的项目】

进入我的项目后点击添加按钮，下图中的【1】，然后按自己要求填写【2】中内容，我这里就用了默认【no name】作为演示
2.选择图标
项目创建好后就可以去搜索自己要的图标了，找到自己要的图标后点击购物车，放入购物车中

然后点击右上角的购物车按钮，会弹出侧栏，点击【添加至项目】，然后选择自己刚创建的项目，如图：

3导出字体文件
添加后就可以在项目中看到了，然后前往我 的项目后就可以下载到本地，如图：

下载下来后是个压缩包，里面包含了自己文件，演示文件，演示文件中其实已经有详细的引用方式了。

3.2.项目端引用

前面文件下载完成后就可以做本地的部署了，
项目端引用主要分3步
1.文件下载
将其中的iconfont.css,iconfont.ttf,iconfont.woff,iconfont.woff2放到你想放的静态文件夹下，我这里习惯放在static下，所以在这里新建了个icon，用来存放这些文件，这里看你喜好，自己记得就好

2.CSS引用
然后进入到App.vue中的style进行CSS引用

<style>
	@import '@/static/icon/iconfont.css'; 
</style>

3.CSS引用路径修改
这里是个小坑，因为默认网页中css引用当前文件夹下的字体文件是没问题的，但是在uniapp中需要去修改iconfont.css中的引用字体的文件位置

将

@font-face {
  font-family: "iconfont"; /* Project id 3355581 */
  src: url(iconfont.woff2?t=1650891154292') format('woff2'),
       url('iconfont.woff?t=1650891154292') format('woff'),
       url('iconfont.ttf?t=1650891154292') format('truetype');
}

改为如下（记得按你自己的路径来修改）

@font-face {
  font-family: "iconfont"; /* Project id 3355581 */
  src: url('/static/icon/iconfont.woff2?t=1650891154292') format('woff2'),
       url('/static/icon/iconfont.woff?t=1650891154292') format('woff'),
       url('/static/icon/iconfont.ttf?t=1650891154292') format('truetype');
}

至此就可以在前端进行引用了，eg:

<i class="iconfont icon-xueyuanguanli"style="font-size: 2rem;color:#ddee33;"></i>

这篇好文章是转载于：学新通技术网