在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>