uniapp的iconfont引入以及注意事项，微信小程序端问题解决

Dear 丶 2023-02-20 06:57 40阅读 0赞

这里说说uni-app怎么引入iconfont，以及在uni-app里需要注意什么（我们一步步来，微信问题在最后面）

1）阿里巴巴矢量图标库创建项目，[官网地址][Link 1]  
这个大多数前端基本都会，我就不赘述了，不会的上网查查怎么使用

2）添加好你的图标，进到你的项目里  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM0NDMwNTQ0_size_16_color_FFFFFF_t_70]  
点击“下载至本地”，解压后获得其中两个文件iconfont.css和iconfont.ttf  
![在这里插入图片描述][20200709164300264.png]

3）在项目里创建两个文件夹common，static  
![在这里插入图片描述][20200709163641714.png]  
把iconfont.css放到common文件夹下，把iconfont.ttf放到static文件夹下  
（这时候有用图标功能的人可能会有疑问，为什么不把两个文件都放static里，原因是：static文件夹放置的文件，在手机移动端可能会被认为是静态文件，而不进行编译（如less，sass，css），所以需要另外建一个common文件放置iconfont.css）

4）(全局引入iconfont)，打开App.vue  
![在这里插入图片描述][20200709165057156.png]  
在App.vue的style标签里引入你iconfont.css(我这里使用的样式预编译是less)

5）(在iconfont.css里引入iconfont.ttf)  
打开iconfont.css，修改@font-face为下面内容

@font-face { 
      font-family: "iconfont";
      //下面写iconfont.ttf的存放路径
      src: url('~@/static/iconfont.ttf'); 
    }

6）（使用iconfont功能）这时候你就能在页面使用图标了  
有两种方式，都需要class="icon iconfont"来引入，如下图两个箭头

<template>
    	<view class="container">
    		<view class="icon iconfont">第一个箭头</view>
    		<view >----------------------------------------------</view>
    		<view class="icon iconfont icon-fanhui">第二个箭头</view>
    	</view>
    </template>

效果  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM0NDMwNTQ0_size_16_color_FFFFFF_t_70 1]  
第一个箭头是第一种方式，![在这里插入图片描述][20200709172207153.png]是引用代码，需要在图标库项目里复制引用代码，如下图  
![在这里插入图片描述][20200709173444493.png]  
把鼠标移到图标上方，可以看到复制代码  
![在这里插入图片描述][20200709173429507.png]  
第二种是点开右上角的铅笔头![在这里插入图片描述][20200709174538316.png]  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM0NDMwNTQ0_size_16_color_FFFFFF_t_70 2]  
然后复制font class里的内容，class变成icon iconfont icon-你复制的内容

<template>
    	<view class="container">
    		<view class="icon iconfont icon-fanhui">第二个箭头</view>
    	</view>
    </template>

7）微信小程序问题：  
打开微信小程序来调试页面，你会发现图标报错或者消失，找了一下原因，原来是iconfont.ttf不支持线下引入，所以要引入线上ttf

我们回到图标库，先“点击生成代码”，然后“点此复制代码”  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM0NDMwNTQ0_size_16_color_FFFFFF_t_70 3]  
然后回到iconfont.css，覆盖原先的@font-face，并且在每个url前加上https:  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM0NDMwNTQ0_size_16_color_FFFFFF_t_70 4]  
问题解决，所以ttf文件就不用再引入了  
但以后每次更新图标库都需要手动生成一下新的线上代码，然后覆盖

[Link 1]: https://www.iconfont.cn/home/index
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM0NDMwNTQ0_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/2020070916402366.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM0NDMwNTQ0,size_16,color_FFFFFF,t_70
[20200709164300264.png]: https://img-blog.csdnimg.cn/20200709164300264.png
[20200709163641714.png]: https://img-blog.csdnimg.cn/20200709163641714.png
[20200709165057156.png]: https://img-blog.csdnimg.cn/20200709165057156.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM0NDMwNTQ0_size_16_color_FFFFFF_t_70 1]: https://img-blog.csdnimg.cn/20200709174237763.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM0NDMwNTQ0,size_16,color_FFFFFF,t_70
[20200709172207153.png]: https://img-blog.csdnimg.cn/20200709172207153.png
[20200709173444493.png]: https://img-blog.csdnimg.cn/20200709173444493.png
[20200709173429507.png]: https://img-blog.csdnimg.cn/20200709173429507.png
[20200709174538316.png]: https://img-blog.csdnimg.cn/20200709174538316.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM0NDMwNTQ0_size_16_color_FFFFFF_t_70 2]: https://img-blog.csdnimg.cn/20200709174618852.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM0NDMwNTQ0,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM0NDMwNTQ0_size_16_color_FFFFFF_t_70 3]: https://img-blog.csdnimg.cn/20200709175335679.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM0NDMwNTQ0,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM0NDMwNTQ0_size_16_color_FFFFFF_t_70 4]: https://img-blog.csdnimg.cn/20200709175712475.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM0NDMwNTQ0,size_16,color_FFFFFF,t_70