vue引入阿里图标（unicode引用）

╰+攻爆jí腚メ 2023-07-18 04:57 14阅读 0赞

## 1、选择图标并加入项目 ##

把选好的图标放如购物车，并加入项目  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzIzNjA2Mg_size_16_color_FFFFFF_t_70]

## 2、复制font-face ##

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzIzNjA2Mg_size_16_color_FFFFFF_t_70 1]

## 3、建立一个iconfont.css ##

把代码复制在里面  
并加上.iconfont\{\}控制图标样式（一般为下面内容，按需求修改）

@font-face { 
      font-family: 'iconfont';  /* project id 1706938 */
      src: url('//at.alicdn.com/t/font_1706938_7m6luurlbyh.eot');
      src: url('//at.alicdn.com/t/font_1706938_7m6luurlbyh.eot?#iefix') format('embedded-opentype'),
      url('//at.alicdn.com/t/font_1706938_7m6luurlbyh.woff2') format('woff2'),
      url('//at.alicdn.com/t/font_1706938_7m6luurlbyh.woff') format('woff'),
      url('//at.alicdn.com/t/font_1706938_7m6luurlbyh.ttf') format('truetype'),
      url('//at.alicdn.com/t/font_1706938_7m6luurlbyh.svg#iconfont') format('svg');
    }
    
    .iconfont { 
      font-family: "iconfont" !important;
      font-size: 16px;
      font-style: normal;
      -webkit-font-smoothing: antialiased;
      -moz-osx-font-smoothing: grayscale;
    }

## 4、引入iconfont.css ##

引入方式有两种，那种都行

#### 4.1、app.vue里面引入 ####

@import "assets/css/iconfont.css";

#### 4.2、在main.js引入 ####

import '../public/fonts/iconfont.css'

### 5、使用字体图标 ###

有两种方式使用

#### 5.1、HTML 实体字符码 ####

![在这里插入图片描述][20200324143943979.png]  
搜索下的xe610;就是html实体字符码  
使用方式：

#### 5.2、font class ####

在iconfont.css文件里，添加一个（.icon-图标命名：before）我这里是.icon-xinxi:before

.icon-xinxi:before { 
      content: "\e600";
    }

使用方式：

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzIzNjA2Mg_size_16_color_FFFFFF_t_70]: /images/20230528/b918bfbacd9240e9a37f94488a8c972b.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzIzNjA2Mg_size_16_color_FFFFFF_t_70 1]: /images/20230528/bf360dea12604e028dadf25e38775c19.png
[20200324143943979.png]: /images/20230528/628d22dd531146b492c0d0f3faa5b1a4.png