uni-app 使用iconfont图标字体

- 日理万妓 2023-06-25 14:27 2阅读 0赞

### 介绍2种方式： ###

**一、使用class类名 添加图标**

** 二、使用字体代码添加图标**

### **一、class类名：** ###

在confont中，选择想要的图标，加入购物车，添加至项目：

**注意： 必须要先点击 查看在线连接，然后点击Font class 才能出来 提示！！！**

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQyNzc4MDAx_size_16_color_FFFFFF_t_70][]

点击：* 下方新 icon 来袭，点击更新代码，更新后将支持 WOFF2 格式 ，* 复制代码至浏览器打开：

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQyNzc4MDAx_size_16_color_FFFFFF_t_70 1][]

复制对应的css代码至你的项目中的static文件夹下，创建的iconfont.css文件中 ：

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQyNzc4MDAx_size_16_color_FFFFFF_t_70 2][]

@font-face {font-family: "iconfont";
        src:url('https://at.alicdn.com/t/font_1529268_gm4lr2u34im.ttf') format('truetype') /* chrome, firefox, opera, Safari, Android, iOS 4.2+ */;
    }
    	
    .iconfont {
      font-family: iconfont !important;
      font-style: normal;
      -webkit-font-smoothing: antialiased;
      font-size:$uni-font-size-lg;
    }
    .icon-xin:before {
      content: "\e623";
    }

最后，还要更新下@font-face 中的字体的url路径，替换成下边路径：

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQyNzc4MDAx_size_16_color_FFFFFF_t_70 3][]

在项目中，使用css类名即可：

![20191229163534984.png][]

## ##

### **二、使用字体图标：** ###

**1、与上边类似，在static 文件夹下创建 iconfont.css，把下边代码复制 进去：**

@font-face {font-family: "iconfont";
      src: url('https://at.alicdn.com/t/font_1529268_3djn3t6heh9.ttf')
    }
    
    .iconfont {
      font-family: "iconfont" !important;
      font-size: 30px;
      font-style: normal;
      -webkit-font-smoothing: antialiased;
      -moz-osx-font-smoothing: grayscale;
    }

**2、在iconfont中，把想要的图标添加至项目，然后点击：* 下方新 icon 来袭，点击更新代码，更新后将支持 WOFF2 格式 ，***

把上边 @font-face 中的url 中的 **//at.alicdn.com/t/font\_1529268\_3djn3t6heh9.ttf**   替换成 下边红框显示的代码：

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQyNzc4MDAx_size_16_color_FFFFFF_t_70 4][]

**3、之后，复制字体图标代码，在标签中使用即可：**

![20191230142329239.png][]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQyNzc4MDAx_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/20191229161222689.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQyNzc4MDAx,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQyNzc4MDAx_size_16_color_FFFFFF_t_70 1]: https://img-blog.csdnimg.cn/20191229161742472.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQyNzc4MDAx,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQyNzc4MDAx_size_16_color_FFFFFF_t_70 2]: https://img-blog.csdnimg.cn/20191229161646772.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQyNzc4MDAx,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQyNzc4MDAx_size_16_color_FFFFFF_t_70 3]: https://img-blog.csdnimg.cn/20191229163448821.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQyNzc4MDAx,size_16,color_FFFFFF,t_70
[20191229163534984.png]: https://img-blog.csdnimg.cn/20191229163534984.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQyNzc4MDAx_size_16_color_FFFFFF_t_70 4]: https://img-blog.csdnimg.cn/20191230141203292.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQyNzc4MDAx,size_16,color_FFFFFF,t_70
[20191230142329239.png]: https://img-blog.csdnimg.cn/20191230142329239.png