在VUE下使用阿里圖標

教程：

1.打開阿里icon，註冊 >登陸>圖標管理>個人項目

 

 

 

新建項目

 

 

新建項目

項目名稱隨便寫。前綴注意，不要跟element-ui自帶的icon(前綴爲：el-icon)重名了。

設置完，點新建

 

注意前綴。設置完，點新建

如今咱們返回阿里icon首頁，點進去你想要的icon庫，由於沒有批量導入購物車，因此通常狀況下須要一個一個去點，太浪費時間，那麼請在控制檯輸入如下代碼，批量導入

var icons = document.querySelectorAll('.icon-gouwuche1');

var auto_click = function(i) { if (i < icons.length) { setTimeout(function() { icons.item(i).click(); auto_click(i + 1); }, 600); } };

auto_click(0);

 

而後點擊回車，他會把這套圖庫全部icon加入購物車

點頁面上的購物車

 

頁面右邊的購物車圖標，點擊

把圖標都添加到剛纔建立的項目裏

 

 

生成icon的在線css連接

 

生成在線css連接

4. 在Vue項目中，引用在線css連接和新建css樣式文件 （重點）

4.1 在Vue項目中建立iconfont.css文件，固然名字自定義。

[class^="el-icon-ali"], [class*="el-icon-ali"]
{
  font-family:"iconfont" !important;
  font-size:16px;
  font-style:normal;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

這裏的 el-icon-ali 是我本身起的icon前綴名。

4.2 引用阿里項目在線的css連接

<link rel="stylesheet" href="//at.alicdn.com/t/font_937408_7hvsv5fqxr.css"/>

 

我是在index.html裏面引用的。放在前面

4.3 在main.js中添加引用本身建立的css文件

import '@/assets/iconfont.css' // global css

 

4.4 能夠在項目中使用你的icon啦~~~~

<el-button type="primary" icon="el-icon-ali-youhui">搜索</el-button>