當前位置：首頁 > 前端技术 > HTML >内容正文

HTML

前端学习（224）:iconfont矢量库

發布時間：2023/12/10 HTML 44 豆豆

生活随笔收集整理的這篇文章主要介紹了前端学习（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>

??? 示例代碼如下：

???

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

??? 2.引入線上iconfont.css

??? 找到自己創建的項目，找到font-class，復制代碼到源代碼中，引入外聯樣式表iconfont.css

第二步：挑選相應圖標并獲取類名，應用于頁面

??? 打開下載的壓縮包文件夾，找到demo_fontclass.html，使用瀏覽器打開，復制所用圖標的類名。粘貼至所用的頁面代碼中。

??? 或者在項目中直接復制圖標的類名:

??? 示例代碼如下：

4.symbol引用

??? 這是一種全新的使用方式，應該說這才是未來的主流，也是平臺目前推薦的用法。相關介紹可以參考這篇文章這種用法其實是做了一個svg的集合，與上面兩種相比具有如下特點：

??????? 支持多色圖標了，不再受單色限制。
??????? 通過一些技巧，支持像字體那樣，通過font-size,color來調整樣式。
??????? 兼容性較差，支持 ie9+,及現代瀏覽器。
??????? 瀏覽器渲染svg的性能一般，還不如png。

??? Symbol引用也可以在本地或線上引用，參照font-class的引用方式即可。

??? 第一步：引入iconfont.js文件：

??? 引入本地iconfont.js文件

??? 引入線上iconfont.js文件

??? 第二步：加入通用css代碼（引入一次就行）：

??? 第三步：挑選相應圖標并獲取類名，應用于頁面：

??? 使用瀏覽器打開文件，找到圖標的類名，并按下例格式引用到頁面代碼中：

??? 同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><script src="js/iconfont.js"></script><script src="http://at.alicdn.com/t/font_617401_ecaofzzw91pxpqfr.js"></script></body>

??? 使用以上方法，iconfont就可以顯示在頁面上啦！沒顯示？那就在看一遍。這可能是最全的引入iconfont的方法了！！

??? 引用時出現顯示的是方框，或者沒有顯示。原因是iconfont更新了新的圖標,此時需要同時更新iconfont的鏈接。如果沒有更新鏈接,那么就會造成引用不到的原因,然后就變成小方框了。

總結

以上是生活随笔為你收集整理的前端学习（224）:iconfont矢量库的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。

上一篇：城通网盘，千军万马，千脑网盘，119g网
下一篇： 2017年html5行业报告,云适配发布