iconFont字體圖標


方法一:簡單粗暴法

1.打開 iconFont官網 選擇自己喜歡的圖標,並且添加購物車

例如我現在選擇三個圖標

 

點擊購物車,添加至項目

為了方便可以給項目起一個名字

選擇Font class

點擊“暫無代碼,點此生成”

 

就會出現我們的鏈接

接下來復制鏈接地址,在我們的vue項目中,找到index.html文件,引入css樣式,記住這里要放上你的鏈接地址....

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

接下來我們就可以在任何組件地方使用我們的圖標了,我這里就是用上面生成的三個圖標其中的一個。

<i class="iconfont  icon-zitigui-xianxing"></i>

是不是很簡單???!!

 

第二種方法:

第一種是很簡單,可是如果我們的客戶不能鏈接外網或者突然間沒有網速等情況怎么辦??前端為了客戶體驗而生(這里感謝喬布斯,讓客戶體驗越來越重要)

所以,我們要使用第二種,下載到本地

 

接着上面的步驟,我們先把之前在index.js文件下link進去的樣式給取消(一定要取消),然后點擊下載到本地

解壓我們下載好的文件,可以看到文件里面總共有10個文件,三個demo.html等等

在vue項目中創建iconfont文件夾,把我們下載好的文件iconfont.css和iconfont.ttf放到該文件夾下

 

當然也可以放在不同的文件夾下,但是需要注意的是必須修改iconfont.css  src引入的字體路徑,現在默認的是絕對路徑。至於路徑如何對應,這點大家都知道


 

然后就可以全局引入,在main.js中引入iconfont.css樣式

import './assets/iconfont/iconfont.css'(這是我的文件路徑,如果在不同的項目下需要注意)

import 'xxx/xxx/xxx/iconfont.css'

在組件中使用方法就和方法1一樣了。

 

這里可能會報錯

需要下載css-loader依賴包

npm install css-loader --save

ok!!!

如果你的才華還實現不了你的野心,那就靜下心來,埋頭苦干。有志者事竟成破釜成舟百二秦關終屬楚,苦心人天不負卧薪嘗膽三千越甲可吞吳!
 
把下載好的文件全部放在文件夾下
通過import '../src/assets/iconfont/iconfont.css' 引入
接着直接用 <div class="iconfont icon-chakangengduo">1</div>  便可以使用了


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM