好久沒用到阿里巴巴的圖標(biāo)，突然要用到就發(fā)現(xiàn)不會用了，只會導(dǎo)出png格式的圖標(biāo)png了= =
目錄
1、字體圖標(biāo)
方法一、本地使用通過類名使用阿里矢量圖標(biāo)
1、把圖標(biāo)添加入庫
2、把圖標(biāo)添加到項目
?3、下載字體圖標(biāo)
4、使用文件
5、在對應(yīng)的HTML頁面上引入css
6、使用字體圖標(biāo)
7、在HTML中通過類名去使用字體圖標(biāo)
方法二、通過在線鏈接使用阿里字體圖標(biāo)
方法三、通過Unicode 使用字體圖標(biāo)
四、注意事項
1、字體圖標(biāo)
字體圖標(biāo)：可以讓我們在頁面中實現(xiàn)網(wǎng)頁中的簡潔圖標(biāo)的效果 -- 看起來是圖標(biāo)
-
字體圖標(biāo)
-
字體圖標(biāo) 展示的是圖標(biāo)，本質(zhì)是字體
-
處理簡單的、顏色單一的圖標(biāo)
-
-
字體圖標(biāo)的優(yōu)點
-
靈活性：靈活地修改樣式，例如：尺寸、顏色等
-
輕量級：體積小、渲染快、降低服務(wù)器請求次數(shù)
-
兼容性：幾乎兼容所有的主流瀏覽器
-
使用方便
-
常用的字體圖標(biāo)應(yīng)該就是阿里巴巴的矢量圖庫，還有一個一開始學(xué)習(xí)前端時候用到的IcoMoon（我叫它大眼珠子哈哈哈哈哈）
同時在vant里面也是有字體圖標(biāo)的
這里就寫一下阿里巴巴矢量圖標(biāo)在HTML上面怎么去用
方法一、本地使用通過類名使用阿里矢量圖標(biāo)
1、把圖標(biāo)添加入庫
打開官網(wǎng)，然后找個自己想要的圖標(biāo)
iconfont-阿里巴巴矢量圖標(biāo)庫https://www.iconfont.cn/
然后找到想要的圖標(biāo)，鼠標(biāo)放上去選【入庫】
然后右上角的購物車就可以看到添加入庫的圖標(biāo)了
2、把圖標(biāo)添加到項目
然后我們進(jìn)到這里來
然后把它們【添加至項目】
然后打開這個項目就可以看到加入項目里面的圖標(biāo)了
ps：如果找不到自己的項目在那里，可以在這里找到
?3、下載字體圖標(biāo)
這里先使用一下如何本地去使用字體圖標(biāo)
?然后得到一個壓縮包，打開這個壓縮包
?在這個壓縮包里面，我們需要使用到的文件如下：
?以及一個CSS文件
4、使用文件
我們在對應(yīng)的HTML文件夾里面創(chuàng)建一個文件夾叫【fonts】，這個fonts要跟images、css等平級
?然后把上面的四個文件放入到這個fonts文件夾中
（其實我覺得全部解壓進(jìn)去就行了...要不然還得手動挑）
?這里雖然有一個CSS的文件，但是不要放到css文件夾里面，一定要和字體圖標(biāo)文件放到一起，這樣子才方便后期的更換
5、在對應(yīng)的HTML頁面上引入css
6、使用字體圖標(biāo)
調(diào)用圖標(biāo)對應(yīng)的 類名，必須調(diào)用兩個類名
-
iconfont類：基本樣式、包含字體的使用等
-
icon - xxx :圖標(biāo)對應(yīng)的類名
我們前面得到的壓縮包里面，有一個html文件，
打開這個html，里面是下載下來的字體圖標(biāo)
?然后我們選擇【Font class】
在這個HTML文件下面是有一個使用手冊的
7、在HTML中通過類名去使用字體圖標(biāo)
這里的字體圖標(biāo)，需要通過兩個類名！iconfont 和 對應(yīng)的字體圖標(biāo)類名，也就是 .icon-xxx
<body>
<i class="iconfont icon-weixin"></i>
<i class="iconfont icon-bofang"></i>
<i class="iconfont icon-qq"></i>
</body>打開就可以看到字體圖標(biāo)了
?在使用字體圖標(biāo)的時候，都是使用 i標(biāo)簽，而字體圖標(biāo)的本質(zhì)是一個文字字體，是可以在css通過font-size這種來修改大小樣式的?
方法二、通過在線鏈接使用阿里字體圖標(biāo)
1、回到我的項目，然后點擊查看在線鏈接
2、點擊生成代碼后，得到一個css的文件路徑
3、把這個css引入到html中
?但是這里要在斜杠前面拼接上一個 http：
<title>Document</title>
<link rel="stylesheet" >4、使用字體（同樣通過兩個類使用，iconfont和icon-xxx）
<body>
<i class="iconfont icon-qq"></i>
<span class="iconfont icon-bofang"></span>
</body>1、這里的 icon-xxx 代碼是可以在阿里官網(wǎng)上面復(fù)制的
????????
? 2、同樣要加上一個 iconfont類
方法三、通過Unicode 使用字體圖標(biāo)
1、我們在項目上選擇 Unicode
但是，這個Unicode下面會給一個很長很長的css樣式，不用鳥他，打開
?Fontclass，把在線css引入進(jìn)去，不要引入unicode給的樣式
<title>Document</title>
<link rel="stylesheet" >
?2、然后回到Unicode，復(fù)制圖標(biāo)的代碼
?3、把這個代碼配合HTML的標(biāo)簽進(jìn)行使用
<body>
<i class="iconfont"></i>
</body>注意的是：復(fù)制的代碼是粘貼在標(biāo)簽的內(nèi)容范圍內(nèi)，同時還需要在標(biāo)簽上聲明這是一個字體圖標(biāo)，也就是在上面加上 iconfont類
四、注意事項
在字體圖標(biāo)上，我們習(xí)慣使用標(biāo)簽 <i>
但是這個標(biāo)簽的本意是讓文本傾斜，但是在引入字體圖標(biāo)后發(fā)現(xiàn)并沒有傾斜，這是因為在引入的css中添加了不讓文本傾斜的樣式文章來源：http://www.zghlxwxcb.cn/news/detail-600582.html
font-style:normal;(同時字體圖標(biāo)也可以通過偽類元素去實現(xiàn)，但是我不習(xí)慣用偽類（就是記不下來= =））文章來源地址http://www.zghlxwxcb.cn/news/detail-600582.html
到了這里，關(guān)于三種方式在HTML使用阿里字體圖標(biāo)--iconfont阿里巴巴矢量圖標(biāo)庫的文章就介紹完了。如果您還想了解更多內(nèi)容，請在右上角搜索TOY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
