前端学习（224）:iconfont矢量库
矢量庫
一、如何下載iconfont圖標。
在iconfont-阿里巴巴矢量圖標庫中有多種圖標供你選擇。比如我們選擇其中的一個作為示例。?????????????????????????????????????????????????????????
鼠標懸浮上后會出現三種選擇：
??? 1.添加入庫：功能和淘寶中的購物車一樣，可以添加多個圖標進行操作。.
??? 2.收藏：?????? 同樣可以選擇多個自己喜愛的圖標放在”我的收藏”中，避免以后找不到。
??? 3.下載圖標：選擇單個圖標進行下載，可下載為SVG格式、PNG格式和AI格式。
??? 下載的基本上都是壓縮包的形式。解壓后即可引入。下面我們了解一下如何引入inconfont圖標。
二、如何引入iconfont圖標
??? 引入iconfont可以在線上引入和本地引入。
??? 主要的引入方式有：icon單個引入(本地引入)、unicode引入、font-class引入、symbol引入。
1.icon單個使用。
????? 用戶直接下載SVG、AI、PNG格式的圖標。然后在源碼中直接引用。如<img src=””>
????? SVG格式則是：下載之后，推薦使用谷歌瀏覽器打開，右擊，選擇查看網頁源代碼。
??? 選擇<svg …>…</svg>的所有內容，進行復制。將代碼粘貼到要顯示的前端頁面中，利用css可進行高寬的修飾等。
??? 此種方式適合用在圖標引用特別少，以后也不需要特別維護的場景。
???????????? 比如設計師用來做demo原型。
???????????? 前端臨時做個活動頁。
???????????? 當然如果你只是為了下載圖標做PPT,也是極好的。
??? 不過如果是成體系的應用使用，建議用戶把icon加入項目，然后使用下面三種推薦的方式。
2.unicode引用(線上)
??? unicode是字體在網頁端最原始的應用方式，特點是：
?
??????? 兼容性最好，支持ie6+，及所有現代瀏覽器。
??????? 支持按字體的方式去動態調整圖標大小，顏色等等。
??????? 但是因為是字體，所以不支持多色。只能使用平臺里單色的圖標，就算項目里有多色圖標也會自動去色。
??? 第一步：拷貝項目下面生成的font-face
??? 點擊添加至項目后自行創建一個項目，如demo。
??????? 復制代碼粘貼至前端頁面的<style></style>中。 // 前一定要加上 http:
??? 第二步：定義使用iconfont的樣式
???
.iconfont{font-family:"iconfont" !important;font-size:16px;font-style:normal;-webkit-font-smoothing: antialiased;-webkit-text-stroke-width: 0.2px;-moz-osx-font-smoothing: grayscale;}??? 第三步：挑選相應圖標并獲取字體編碼，應用于頁面
??? <i class="iconfont"></i>
??? 示例代碼如下：
???
<style>@font-face {font-family: 'iconfont'; /* project id 617401 */src: url('http://at.alicdn.com/t/font_617401_ecaofzzw91pxpqfr.eot');src: url('http://at.alicdn.com/t/font_617401_ecaofzzw91pxpqfr.eot?#iefix') format('embedded-opentype'),url('http://at.alicdn.com/t/font_617401_ecaofzzw91pxpqfr.woff') format('woff'),url('http://at.alicdn.com/t/font_617401_ecaofzzw91pxpqfr.ttf') format('truetype'),url('http://at.alicdn.com/t/font_617401_ecaofzzw91pxpqfr.svg#iconfont') format('svg');}.iconfont {font-family:"iconfont" !important;font-size:16px;font-style:normal;-webkit-font-smoothing: antialiased;-moz-osx-font-smoothing: grayscale;}</style></head><body><i class="iconfont"></i></body>3.font-class引入
??? font-class是unicode使用方式的一種變種，主要是解決unicode書寫不直觀，語意不明確的問題。
??? 與unicode使用方式相比，具有如下特點：
?
??????????? 兼容性良好，支持ie8+，及所有現代瀏覽器。
??????????? 相比于unicode語意明確，書寫更直觀。可以很容易分辨這個icon是什么。
??????????? 因為使用class來定義圖標，所以當要替換圖標時，只需要修改class里面的unicode引用。
??????????? 不過因為本質上還是使用的字體，所以多色圖標還是不支持的。
第一步：引入iconfont.css文件：
??? 引入css文件可以用線上也可以用本地的，本地的需要下載文件，線上引入可直接在項目中復制地址。
??? 1.引入本地的iconfont.css文件
??? 下載壓縮包文件，解壓，找到文件夾中的iconfont.css件
??? 復制粘貼到本地項目的文件夾css中
??? 然后在源代碼的<style></style>上面，寫link標簽，引入外聯樣式表iconfont.css
<link rel="stylesheet" type="text/css" href="css/iconfont.css">
??? 2.引入線上iconfont.css
??? 找到自己創建的項目，找到font-class，復制代碼到源代碼中，引入外聯樣式表iconfont.css
第二步：挑選相應圖標并獲取類名，應用于頁面
??? 打開下載的壓縮包文件夾，找到demo_fontclass.html，使用瀏覽器打開，復制所用圖標的類名。粘貼至所用的頁面代碼中。
<i class="iconfont icon-kefu"></i>
??? 或者在項目中直接復制圖標的類名:
??? 示例代碼如下：
<head><!--引入線上css文件--><link rel="stylesheet" type="text/css" href="http://at.alicdn.com/t/font_617401_ecaofzzw91pxpqfr.css"><!--引入本地css文件--><link rel="stylesheet" type="text/css" href="css/iconfont.css"><style></style></head><body><i class="iconfont icon-kefu"></i></body></html>4.symbol引用
??? 這是一種全新的使用方式，應該說這才是未來的主流，也是平臺目前推薦的用法。相關介紹可以參考這篇文章 這種用法其實是做了一個svg的集合，與上面兩種相比具有如下特點：
??????? 支持多色圖標了，不再受單色限制。
??????? 通過一些技巧，支持像字體那樣，通過font-size,color來調整樣式。
??????? 兼容性較差，支持 ie9+,及現代瀏覽器。
??????? 瀏覽器渲染svg的性能一般，還不如png。
??? Symbol引用也可以在本地或線上引用，參照font-class的引用方式即可。
??? 第一步：引入iconfont.js文件：
??? 引入本地iconfont.js文件
<script src="js/iconfont.js"></script>
??? 引入線上iconfont.js文件
??? 第二步：加入通用css代碼（引入一次就行）：
<style type="text/css">.icon {width: 1em;height: 1em;vertical-align: -0.15em;fill: currentColor;overflow: hidden;}</style>??? 第三步：挑選相應圖標并獲取類名，應用于頁面：
??? 使用瀏覽器打開文件，找到圖標的類名，并按下例格式引用到頁面代碼中：
??
<svg class="icon" aria-hidden="true"><use xlink:href="#icon-kefu"></use></svg>??? 同font-class一樣，也可以直接復制項目中的類名
??? 示例代碼如下：
?
<head><style type="text/css">.icon {width: 1em;height: 1em;vertical-align: -0.15em;fill: currentColor;overflow: hidden;}</style></head><body><svg class="icon" aria-hidden="true"><use xlink:href="#icon-kefu"></use></svg><!--本地引用js文件--><script src="js/iconfont.js"></script><!--線上引用js文件--><script src="http://at.alicdn.com/t/font_617401_ecaofzzw91pxpqfr.js"></script></body>?
??? 使用以上方法，iconfont就可以顯示在頁面上啦！沒顯示？那就在看一遍。這可能是最全的引入iconfont的方法了！！
??? 引用時出現顯示的是方框，或者沒有顯示。原因是iconfont更新了新的圖標,此時需要同時更新iconfont的鏈接。如果沒有更新鏈接,那么就會造成引用不到的原因,然后就變成小方框了。
?
?
總結
以上是生活随笔為你收集整理的前端学习（224）:iconfont矢量库的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 城通网盘，千军万马，千脑网盘，119g网
- 下一篇： 尼恩Java面试宝典