iconfont字体矢量图标的使用方法

你的名字 2021-09-18 23:34 491阅读 0赞

**打开阿里巴巴矢量图标库 https://www.iconfont.cn/**

**点击登录**

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

**使用github账号登录，其他账号也可以**

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

**找一组图标点击进去，添加入库**

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2Z1OTgzNTMxNTg4_size_16_color_FFFFFF_t_70 2]

**点击购物车图标**

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2Z1OTgzNTMxNTg4_size_16_color_FFFFFF_t_70 3]

**点击添加进项目，没有项目可以创建**

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2Z1OTgzNTMxNTg4_size_16_color_FFFFFF_t_70 4]  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2Z1OTgzNTMxNTg4_size_16_color_FFFFFF_t_70 5]

**这里选择的是Unicode引用，点击下载至本地**

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2Z1OTgzNTMxNTg4_size_16_color_FFFFFF_t_70 6]

**把下载好的文件解压出来，放到项目的css和fonts文件夹**

![在这里插入图片描述][20190415170032116.]

**注意iconfont.css里的文件路径**

@font-face { font-family: "iconfont";
      src: url('./../fonts/iconfont.eot?t=1551842195237'); /* IE9 */
      src: url('./../fonts/iconfont.eot?t=1551842195237#iefix') format('embedded-opentype'), /* IE6-IE8 */
      url('data:application/x-font-woff2;charset=utf-8;base64,d09GMgABAAAAAAdUAAsAAAAADaAAAA') format('woff2'),
      url('./../fonts/iconfont.woff?t=1552034083716') format('woff'),
      url('./../fonts/iconfont.ttf?t=1551842195237') format('truetype'), /* chrome, firefox, opera, Safari, Android, iOS 4.2+ */
      url('./../fonts/iconfont.svg?t=1551842195237#iconfont') format('svg'); /* iOS 4.1- */
    }
    
    .iconfont { 
      font-family: "iconfont" !important;
      font-size: 16px;
      font-style: normal;
      -webkit-font-smoothing: antialiased;
      -moz-osx-font-smoothing: grayscale;
    }
    
    .icon-search:before { 
      content: "\e625";
    }
    
    .icon-star1:before { 
      content: "\e681";
    }
    
    .icon-warn:before { 
      content: "\e6c8";
    }

**在main.js文件里引用全局css**

// The Vue build version to load with the `import` command
    // (runtime-only or standalone) has been set in webpack.base.conf with an alias.
    import Vue from 'vue'
    import App from './App'
    import router from './router'
    import store from './vuex'
    
    import './assets/css/iconfont.css'
    
    Vue.config.productionTip = false
    
    /* eslint-disable no-new */
    new Vue({ 
      el: '#app',
      store,
      router,
      components: {  App },
      template: '<App/>'
    })

**在组件里使用字体图标**  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2Z1OTgzNTMxNTg4_size_16_color_FFFFFF_t_70 7]  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2Z1OTgzNTMxNTg4_size_16_color_FFFFFF_t_70 8]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2Z1OTgzNTMxNTg4_size_16_color_FFFFFF_t_70]: /images/20210812/728af22595e44c49b0bb33a280d3820a.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2Z1OTgzNTMxNTg4_size_16_color_FFFFFF_t_70 1]: /images/20210812/4c3c4baac10547759e2acd9123c67930.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2Z1OTgzNTMxNTg4_size_16_color_FFFFFF_t_70 2]: /images/20210812/6ebc351cfde145f78e23447bab142814.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2Z1OTgzNTMxNTg4_size_16_color_FFFFFF_t_70 3]: /images/20210812/d26b6d6fc4a44c659fc3cef6e37a90d2.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2Z1OTgzNTMxNTg4_size_16_color_FFFFFF_t_70 4]: /images/20210812/9737dfa9b602446190607c250d92ba1a.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2Z1OTgzNTMxNTg4_size_16_color_FFFFFF_t_70 5]: /images/20210812/b41c3a4ee9a844fbb2e9fa7520dde523.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2Z1OTgzNTMxNTg4_size_16_color_FFFFFF_t_70 6]: /images/20210812/4ff18287b72b4ab780d0c00dd460771f.png
[20190415170032116.]: /images/20210812/adfd0a19b6434b92b7a2d8c61cf5f190.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2Z1OTgzNTMxNTg4_size_16_color_FFFFFF_t_70 7]: /images/20210812/804786f06c1e46a1b3e2ee53be51c342.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2Z1OTgzNTMxNTg4_size_16_color_FFFFFF_t_70 8]: /images/20210812/8cfd9eb9f2a24022a948538420001891.png