作為前端，我們也可以更好的利用它，實現網站圖標的美化。

首先找到你需要的圖標并加入庫：三個按鈕分別是 加入庫、加入收藏和下載

點擊下載按鈕后會彈出一個窗口，你可以調整任意顏色和尺寸，可以下載 SVG、AI和PNG3種格式。

點擊右上角圖標，打開庫，點擊“下載代碼”下載字體包，你也可以先添加至項目，然后在“我的項目”里面，點擊“下載到本地”進行下載

點擊“添加至項目”，你可以添加項目名稱，點擊“確定”保存到我的項目

在我的項目中，你可以生成在線鏈接，這里給出3種方式：Unicode、Font class和Symbol

點擊“下載至本地”會下載一個包，解壓后就可以引入使用了

瀏覽器打開“demo_xxx.html”可以看到圖標的使用方法，有三種引用方式

font-class引用：

首先在頭部引入 iconfont.css 文件

然后在 html 代碼中使用相應的類名應用于頁面

"iconfont"是你項目下的font-family。可以通過編輯項目查看，默認是"iconfont"。

unicode引用：

首先拷貝項目生成的 font-face@font-face?{??font-family:?'iconfont';??src:?url('iconfont.eot');??src:?url('iconfont.eot?#iefix')?format('embedded-opentype'),??url('iconfont.woff')?format('woff'),??url('iconfont.ttf')?format('truetype'),??url('iconfont.svg#iconfont')?format('svg');}

定義使用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;}

然后挑選相應圖標并獲取字體編碼，應用于頁面3

IconFont 圖標

首先引入項目下面生成的symbol代碼

加入通用css代碼(引入一次就行)

然后挑選相應圖標并獲取類名，應用于頁面??

使用的時候只需要保留一種方式所需要的文件和字體文件，其他的刪掉就可以了。

總結

以上是生活随笔為你收集整理的阿里云矢量图html页面引入,iconfont 阿里巴巴矢量图标库使用说明的全部內容，希望文章能夠幫你解決所遇到的問題。

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