iconfont-阿里巴巴矢量图标库使用教程
iconfont-阿里巴巴矢量圖標庫使用教程
文章目錄
- iconfont-阿里巴巴矢量圖標庫使用教程
- 一、前言
- 二、使用步驟
- 三、運行效果
一、前言
-
iconfont-阿里巴巴矢量圖標庫
-
矢量化圖標可以協助我們制作HTML，比直接插入img更快捷，頁面效果也更好。它有很多優點：
圖標矢量化我們在最初推行 iconfont 的時候就是為了在Retina設備上也能「絲般柔滑」，這一點圖片需要另外制作兩倍圖，而且縮放后立馬就「有碼了」。在制作上，不單單是圖標設計為兩倍就完事了，需要在整個頁面設計的時候就要是兩倍尺寸的，這對于設計師來說，成本太大（雖然這是趨勢）。
讓樣式回歸CSS具體而言，就是指使用iconfont后，因為圖標就是字體。我們可以用CSS來靈活控制圖標的大小、顏色、陰影等。傳統的 CSS Sprites 我們只能重新設計后再「切圖」，雖然現在有很多自動拼合工具，但是依然繁瑣。進一步的，如果不用兼容IE6-7后，我們完全可以用CSS偽元素來生成圖標。也就是說假如圖標編碼改變了，不用再改動HTML中的編碼，只用修改 content 中的編碼，達到真正目的上的CSS來控制圖標。
圖標規范化通過iconfont平臺，我們可以高效快速的生產出規范的圖標?，F在可以直接通過平臺上傳SVG或ESP文件，就可以轉換成字體圖標了。
自動上傳到阿里云CDN通過平臺生成的字體，自動存儲到阿里云CDN，免費加速。
流量最小化在移動設備，節約流量是我們前端把控用戶體驗關鍵而又容易忽視的一個環節。通常一個項目中，我們并不需要一套大而全圖標庫，也許我只是需要其中的一個關閉按鈕(o)/~。通過平臺可以點選自己需要的圖標，重新生成一份字體，減少字體體積，節約流量的同時帶來更快的加載速度。
二、使用步驟
1.打開iconfont-阿里巴巴矢量圖標庫，搜索圖標，選擇合適的圖標批量加入購物車(如果是單個矢量圖直接下載也可以)
2.在右側點擊購物車
3.在購物車中，推薦是使用添加項目，在賬戶內新建一個項目下次使用的時候，方便下載。這里我們用作HTML開發所以點擊下載代碼。(下載素材是用于SVG、AI、PNG的）
4.下載項目需要的矢量圖，第三步點擊下載代碼可以跳過這步。
5.將下載好的壓縮包解壓，以下文件全部導入HTML項目下css文件中
7.在iconfont.css中可以設置圖標的樣式，這里我默認，一般不作修改。
.iconfont {font-family: "iconfont" !important;font-size: 16px;font-style: normal;-webkit-font-smoothing: antialiased;-moz-osx-font-smoothing: grayscale; }如果想單獨修改某個圖標的大小樣式，可以為span標簽單獨設置一個class
.iconfont2 {font-family: "iconfont" !important;font-size: 160px;font-style: normal;color: #BD2C00;background-color: #B3D4FC;-webkit-font-smoothing: antialiased;-moz-osx-font-smoothing: grayscale; }8.在HTML文件中，第六行導入剛剛下載的iconfont.css,第九行挑選相應圖標并獲取字體編碼，應用于頁面
三、運行效果
總結
以上是生活随笔為你收集整理的iconfont-阿里巴巴矢量图标库使用教程的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： mysql中独立表空间与共享表空间之前如
- 下一篇： 转：Fiddler抓包工具总结