Vue + Element UI 實現權限管理系統前端篇（十一）：第三方圖標庫

本文轉載自查看原文 2018-09-04 18:42 3663 Vue.js/ vue/ 實戰演練/ element

使用第三方圖標庫

用過Elment的同鞋都知道，Element UI提供的字體圖符少之又少，實在是不夠用啊，幸好現在有不少豐富的第三方圖標庫可用，引入也不會很麻煩。

Font Awesome

Font Awesome 提供了675個可縮放的矢量圖標，可以使用CSS所提供的所有特性對它們進行更改，包括：大小、顏色、陰影或者其它任何支持的效果。

Font Awesome 5 跟之前的版本使用方式差別較大，功能是強大了，圖標也更豐富了，但使用也變得更加復雜了。

本人還是比較喜歡之前的使用方式，安裝容易，使用簡單，畢竟我的需求也沒那么復雜，只是簡單的有圖標可用就行了。

網上相關介紹很多，這里就不廢話了，更多詳情參見，官方網址：http://fontawesome.dashgame.com/

安裝依賴

執行以下命令，安裝 font-awesome 依賴。

npm install font-awesome --save

項目引入

在項目 main.js 中引入css依賴。

import 'font-awesome/css/font-awesome.min.css'

頁面使用

項目引入之后，直接在頁面使用就可以了。

測試效果

看到沒，就是這么簡單，就是這么好用，這也是本人最喜歡的使用方式。

另外還可以選擇CDN方式，下載方式等等，這里就不說了，有興趣自行查閱。

官方網址：http://fontawesome.dashgame.com/

Font Awesome 5 使用方式可以參考

官方教程：https://fontawesome.com/how-to-use

Noodlewar: https://segmentfault.com/a/1190000013173840

iconfont

iconfont 是阿里提供的一個圖標庫。

官方網址：http://www.iconfont.cn/

登錄注冊

先到官網注冊一個賬號登錄。

新建項目

選址圖標管理，我的項目。

點擊右側新建項目按鈕新建一個項目。

輸入項目相關信息，注意前綴不要跟項目現有的沖突。

選取圖標

進入圖標庫，選址自己喜歡的圖標庫。

進入圖標庫選擇自己喜歡的圖標加入購物車，因為沒有批量加入，一個個點簡直要命，在控制台輸入以下命令可以批量添加。

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);

執行以上命令后，命令會自動添加圖標到購物車，接下來等它完成就好了。

完成之后，點擊購物車，選擇添加到項目

下載素材

選擇 font class 並下載到本地。

修改配置

解壓下載的文件，打開 iconfont.css。

添加以下代碼，注意：kt-icon 是之前設置的 icon 前綴，第二個 kt-icon 前邊有空格的。

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

添加注意事項如下圖所示。