阿里巴巴圖標庫iconfont的使用方式

文章目錄

- 什么是 iconfong
- 創建一個自己的項目
- 如何使用
- - Unicode 使用方法
  - Font class 使用方式
  - Symbol 使用方式
  - 還有一種使用方式 `在線鏈接`（不推薦，但可用于測試）

什么是 iconfong

Iconfont 是一種圖標字體服務。它將各種圖標設計轉換為字體格式，通過特定的代碼或 CSS 樣式來調用和顯示這些圖標。
可以理解成將圖片變成了文字，文字與圖片的對比就顯而易見了，使用文字圖標體積更小，放大也不會失真。

創建一個自己的項目

iconfont阿里巴巴是亮圖標庫
去到官網在右上角先登錄一下。（可以使用微信登錄或者是微博登錄）

第一步：創建一個項目
在網站的首頁選擇資源管理 > 我的項目
在這里插入圖片描述

新增一個項目。
接下來我們就可以添加圖標到我們剛創建的項目中去了。

找到自己所要使用的圖標添加到購物車即可
這里說明一下，圖標其實有兩種

一種是純色的圖標（就是單一顏色的圖標）
另一種是精美的圖標（別人搭配好顏色的那種）

在這里插入圖片描述

選擇完自己所要用的圖標后，添加至我們剛剛創建的項目。

如何使用

有三種使用方式，我們一個個來，首先先把字體文件下載到本地。
在這里插入圖片描述
下載完的文件解壓出來，有以下幾個文件

Unicode 使用方法

在你的項目中創建一個 icons 的文件夾，將下載完的字體文件全部復制進去。
在這里插入圖片描述
主要是看 iconfont.css 這個文件（引入到你的項目中去）

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><link rel="stylesheet" href="./icons/iconfont.css"><style>.icon {font-size: 100px;color: red;}</style>
</head><body><div class="content"><!-- &#xe61b; 這個是網站上圖標對應的代碼 --><span class="iconfont icon">&#xe844;</span></div>
</body></html>

注意自己圖標代碼與自己添加的圖標保持一致
無論圖標是有顏色還是精美的圖標使用 Unicode 的方法引入都是黑色的。
這樣就可以了與文字是一樣的。(可以改變字體大小，文字顏色等。)

問題總結：使用 Unicode 可能存在的問題

確保 iconfont.css 文件中引入的 iconfont.woff2、iconfont.woff、iconfont.ttf 文件路徑是正確的
在標簽上使用時，確保標簽的 class 屬性中有 iconfont
確保自己的圖標代碼是正確的

Font class 使用方式

Font class 的使用方法與 Unicode 是一樣的。

在這里插入圖片描述
重新下載圖標文件到本地引入到自己項目中去。
還是引入 iconfont.css 文件

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><link rel="stylesheet" href="./icons/iconfont.css"><style>.icon {font-size: 100px;color: red;}</style>
</head><body><div class="content"><span class="iconfont icon--jianpan icon"></span></div>
</body></html>

在這里插入圖片描述
注意事項同上

確保 iconfont.css 文件中引入的 iconfont.woff2、iconfont.woff、iconfont.ttf 文件路徑是正確的
在標簽上使用時，確保標簽的 class 屬性中有 iconfont
確保自己的圖標 class名 是正確的

Symbol 使用方式

Symbol 的方式與前兩種就不太一樣了。
還是先下載字體文件。
這次我們需要引入 iconfont.js 這個文件。
使用 svg 的方式引入圖標

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

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><script src="./icons/iconfont.js"></script><style>.icon {width: 300px;height: 150px;}</style>
</head><body><div class="content"><svg class="icon svg-icon" aria-hidden="true"><use xlink:href="#icon--jianpan"></use></svg></div>
</body></html>

需要注意 use 標簽中 xlink:href 對應的圖標代碼。
使用 Symbol 的方式解決了單色圖標的問題，（也就是說可以使用我們之前引入的多顏色的圖標了）

在這里插入圖片描述

還有一種使用方式 `在線鏈接`（不推薦，但可用于測試）

每種方式下面都有復制代碼這個操作
我們可以直接使用在線鏈接來使用
在這里插入圖片描述

<!-- Symbol 使用 script 標簽引入 -->
<script src="//at.alicdn.com/t/c/font_4343037_7ixg6qj801a.js"></script>
<!-- Font Class 使用 link 標簽引入 -->
<link rel="stylesheet" href="//at.alicdn.com/t/c/font_4343037_7ixg6qj801a.css">
<!-- Unicode 直接拷貝代碼到 css 中 -->
<style>
/* 在線鏈接服務僅供平臺體驗和調試使用，平臺不承諾服務的穩定性，企業客戶需下載字體包自行發布使用并做好備份。 */
@font-face {font-family: 'iconfont';  /* Project id 4343037 */src: url('//at.alicdn.com/t/c/font_4343037_7ixg6qj801a.woff2?t=1719977126887') format('woff2'),url('//at.alicdn.com/t/c/font_4343037_7ixg6qj801a.woff?t=1719977126887') format('woff'),url('//at.alicdn.com/t/c/font_4343037_7ixg6qj801a.ttf?t=1719977126887') format('truetype');
}
</style>

注意：當你的項目中添加了新的圖標，在線鏈接需要手動點機更新一下，并在項目中換上新的地址才能使用。

在這里插入圖片描述

本文來自互聯網用戶投稿，該文觀點僅代表作者本人，不代表本站立場。本站僅提供信息存儲空間服務，不擁有所有權，不承擔相關法律責任。
如若轉載，請注明出處：http://www.pswp.cn/diannao/40144.shtml
繁體地址，請注明出處：http://hk.pswp.cn/diannao/40144.shtml
英文地址，請注明出處：http://en.pswp.cn/diannao/40144.shtml

如若內容造成侵權/違法違規/事實不符，請聯系多彩編程網進行投訴反饋email:809451989@qq.com，一經查實，立即刪除！