網址： https://www.iconfont.cn

1.使用步驟

1.登錄阿里矢量圖標網站

2.搜索想要的圖標且加到購物車

3.點擊右上角的購物車

4.選擇下載代碼，下載完成后解壓文件

5.把下載的文件放到你的項目中

6.引入iconfont.css文件或者iconfont.js文件

使用三種方式：下載代碼

1、Unicode 方式引用

Unicode 是字體在網頁端最原始的應用方式，特點是：

• 兼容性最好，支持 IE6+，及所有現代瀏覽器。

• 支持按字體的方式去動態調整圖標大小，顏色等等。

• 但是因為是字體，所以不支持多色。只能使用平臺里單色的圖標，就算項目里有多色圖標也會自動去色。

注意：新版 iconfont 支持多色圖標，這些多色圖標在 Unicode 模式下將不能使用，如果有需求建議使用symbol 的引用方式

使用步驟如下：

第一步：引入項目下面生成的 fontclass 代碼：

<link rel="stylesheet" href="./iconfont.css">

第二步：挑選相應圖標并獲取字體編碼，應用于頁面

<span class="iconfont">&#x33;</span>

2、font-class 方式引用

font-class 是 Unicode 使用方式的一種變種，主要是解決 Unicode 書寫不直觀，語意不明確的問題。

與 Unicode 使用方式相比，具有如下特點：

• 兼容性良好，支持 IE8+，及所有現代瀏覽器。

• 相比于 Unicode 語意明確，書寫更直觀。可以很容易分辨這個 icon 是什么。

• 因為使用 class 來定義圖標，所以當要替換圖標時，只需要修改 class 里面的 Unicode 引用。

• 不過因為本質上還是使用的字體，所以多色圖標還是不支持的。

• 使用步驟如下：

  第一步：引入項目下面生成的 fontclass 代碼：

  <link rel="stylesheet" href="./iconfont.css">

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

  <span class="iconfont icon-xxx"></span>

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

3、Symbol方式引用

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

• 支持多色圖標了，不再受單色限制。

• 通過一些技巧，支持像字體那樣，通過 font-size, color 來調整樣式。

• 兼容性較差，支持 IE9+，及現代瀏覽器。

• 瀏覽器渲染 SVG 的性能一般，還不如 png。

使用步驟如下：

第一步：引入項目下面生成的 symbol 代碼：

<script src="./iconfont.js"></script>

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

<style>
.icon {
? width: 1em;
? height: 1em;
? vertical-align: -0.15em;
? fill: currentColor;
? overflow: hidden;
}
//改變樣式
? ? .icon{
? ? ? ? width: 100px;
? ? ? ? height: 100px;
? ? ? ? font-size: 20px;?
? ? ? ? display: block;
? ? }
</style>

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

<svg class="icon" aria-hidden="true"><use xlink:href="#icon-xxx"></use> </svg>

2.引入字體圖標第二種方式：添加至項目

?項目引入：
? ? 1.選好圖標添加至項目
? ? 2.選擇要添加的項目（如果沒有項目點擊右上角新建項目），點擊確定
? ? 3.下載至本地
? ? 4.解壓文件，把文件放到代碼中
? ? 5.正常使用

? ? ?添加新的圖標
? ? ?1.把新的圖標選好之后，點擊添加項目，選擇你要添加的項目
? ? ?2.下載至本地
? ? 3.解壓文件，把文件放到代碼中(此時下載的這個文件包括上次選的圖標，也包括這次選的新的圖標)
? ? 4.正常使用

? ?添加新的圖標下載文件后，把原來的文件替換掉，再把iconfont.css和iconfont.js文件鏈接替換一下即可

? ? 與下載代碼的區別：
? ? 下載代碼：
? ? ? 如果添加新的圖標，需要再新下載一個文件，且這個文件的圖標與上個文件的圖標不能在一個文件中，是兩個獨立的文件

? ? 項目引入：
? ? ? 如果添加新的圖標，可以把這些圖標添加到已有的項目文件，這樣原來的圖標和這次新添加的圖標就可以在新的一個文件里了

今天的分享就到這里！

總結

以上是生活随笔為你收集整理的CSS阿里矢量图标(字体图标)的全部內容，希望文章能夠幫你解決所遇到的問題。

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