在 uni app项目中引入 iconfont (本地引入和在线引入方式)

本地引入：

首先登录 iconfont 官网（https://www.iconfont.cn/home/index?spm=a313x.7781069.1998910419.2）

找到需要的字体图标，如果创建项目组的话，就在--我的项目--点击，下载至本地；

如果是直接加入购物车的话，就直接点击下载代码；

  

这两种方式都会下载一个 压缩文件，解压压缩文件之后，文件目录如下（其中我已经标注了两个文件名）：

 

将上图中标注的 CSS 文件 复制到项目中的static目录下，也可以是其他路径下，只要引入的时候路径对就ok;

打开网址： https://www.giftofspeed.com/base64-encoder/    网页内容如下：

点击 选择文件 将上上图中的 ttf 文件 引入，会生成 一大串 英文字母；然后复制；

打开在项目中引入的iconfont.css文件，找到 @font-face 部分，将该部分替换成 

（注意：上面的图片有个地方需要改：将 woff2 改成  truetype ）

并把  用红色矩形框圈起来的部分替换成 那会让你 复制的 一大串英文字母；然后保存；在 App.vue 文件中引入，就可以在全局中使用了；引入方式：

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

 在各个文件中的使用方式的话：有三种方式；方式都很简单；在下载的文件中 ，有一个叫  demo_index.html  的文件，打开该文件有详细介绍

在线引入：

将下载下来的iconfont.css文件中的 @font-face 部分改成一下内容；只不过url 中的地址需要改成你自己的 ttf 文件地址；

@font-face {
	  font-family: iconfont; 
	  src: url('https://at.alicdn.com/t/font_874003_9rw87a8y04t.ttf')
	    format('truetype');
	}

 

ttf 文件地址的话，通过iconfont项目中可以找到： 记得需要加上   https:    ，要不然找不到地址；

 使用方式和本地使用方式一样； 

有什么不对的，还请大神指正；谢谢