前端iconfont兩種使用方式舉例詳解

更新時(shí)間：2025年01月21日 09:37:20 作者：普通網(wǎng)友

這篇文章主要介紹了一種流行的網(wǎng)頁圖標(biāo)解決方案Iconfont的相關(guān)資料,包括創(chuàng)建項(xiàng)目、添加圖標(biāo)、下載代碼、在項(xiàng)目中使用Iconfont和自定義圖標(biāo)樣式等步驟,需要的朋友可以參考下

步驟 1：創(chuàng)建項(xiàng)目并添加圖標(biāo)

1.創(chuàng)建項(xiàng)目：

在 Iconfont 網(wǎng)站上，點(diǎn)擊“我的項(xiàng)目”。
點(diǎn)擊“新建項(xiàng)目”，為你的項(xiàng)目命名并創(chuàng)建。

2.添加圖標(biāo)：

在 Iconfont 網(wǎng)站上搜索你需要的圖標(biāo)。
將你需要的圖標(biāo)添加到購物車。
進(jìn)入購物車，選擇“加入項(xiàng)目”，選擇你剛剛創(chuàng)建的項(xiàng)目

步驟 2：下載項(xiàng)目代碼

下載代碼：

進(jìn)入“我的項(xiàng)目”頁面，選擇你創(chuàng)建的項(xiàng)目。
點(diǎn)擊“下載代碼”，選擇“Font Class”下載格式（推薦）。
下載并解壓文件，你會(huì)得到一個(gè)包含 CSS 文件和字體文件的壓縮包。

步驟 3：在項(xiàng)目中使用 Iconfont

引入 CSS 文件：

將下載的 CSS 文件（通常名為 iconfont.css）和字體文件（通常在 font 文件夾中）放入你的項(xiàng)目目錄中。
在你的 HTML 文件中引入 iconfont.css 文件。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Iconfont Example</title>
    <link rel="stylesheet" href="path/to/iconfont.css" rel="external nofollow"  rel="external nofollow"  rel="external nofollow" >
</head>
<body>
    <!-- 圖標(biāo)示例 -->
    <i class="iconfont icon-example"></i>
</body>
</html>

2.使用圖標(biāo)：

在 HTML 文件中使用 <i> 標(biāo)簽并添加相應(yīng)的類名來顯示圖標(biāo)。
類名格式通常為 iconfont icon-圖標(biāo)名稱。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Iconfont Example</title>
    <link rel="stylesheet" href="path/to/iconfont.css" rel="external nofollow"  rel="external nofollow"  rel="external nofollow" >
    <style>
        .icon {
            font-size: 24px; /* 設(shè)置圖標(biāo)大小 */
            color: #333;    /* 設(shè)置圖標(biāo)顏色 */
        }
    </style>
</head>
<body>
    <!-- 使用圖標(biāo) -->
    <i class="iconfont icon-example icon"></i>
    <i class="iconfont icon-user icon"></i>
    <i class="iconfont icon-settings icon"></i>
</body>
</html>

步驟 4：自定義圖標(biāo)樣式

更改圖標(biāo)大小和顏色：

通過 CSS 可以輕松更改圖標(biāo)的大小和顏色。

.icon {
    font-size: 32px; /* 圖標(biāo)大小 */
    color: #ff6600;  /* 圖標(biāo)顏色 */
}

2.懸停效果：

你可以添加懸停效果來增強(qiáng)用戶體驗(yàn)。

.icon:hover {
    color: #ff0000; /* 懸停時(shí)的顏色 */
}

css使用整體示例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Iconfont Example</title>
    <link rel="stylesheet" href="path/to/iconfont.css" rel="external nofollow"  rel="external nofollow"  rel="external nofollow" >
    <style>
        .icon {
            font-size: 32px; /* 圖標(biāo)大小 */
            color: #333;    /* 圖標(biāo)顏色 */
            margin: 10px;
        }
        .icon:hover {
            color: #ff0000; /* 懸停時(shí)的顏色 */
        }
    </style>
</head>
<body>
    <!-- 使用圖標(biāo) -->
    <i class="iconfont icon-example icon"></i>
    <i class="iconfont icon-user icon"></i>
    <i class="iconfont icon-settings icon"></i>
</body>
</html>

下面是iconfont.js ，也就是JS的使用方式

添加圖標(biāo)步驟同上

步驟 1：獲取 iconfont.js 鏈接

進(jìn)入項(xiàng)目頁面：

在“我的項(xiàng)目”頁面，選擇你創(chuàng)建的項(xiàng)目。

2.獲取 iconfont.js 鏈接：

步驟 2：在項(xiàng)目中使用 iconfont.js

引入iconfont.js文件：

在你的 HTML 文件中引入 iconfont.js 文件。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Iconfont Example</title>
    <script src="path/to/iconfont.js"></script>
</head>
<body>
    <!-- 圖標(biāo)示例 -->
    <svg class="icon" aria-hidden="true">
        <use xlink:href="#icon-example" rel="external nofollow"  rel="external nofollow"  rel="external nofollow" ></use>
    </svg>
</body>
</html>

2.使用圖標(biāo)：

在 HTML 文件中使用 <svg> 標(biāo)簽和 <use> 標(biāo)簽來引用圖標(biāo)。
xlink:href 的值格式為 #icon-圖標(biāo)名稱。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Iconfont Example</title>
    <script src="https://at.alicdn.com/t/font_1234567_abcd1234.js"></script> <!-- 替換為你的 iconfont.js 鏈接 -->
    <style>
        .icon {
            width: 32px;  /* 圖標(biāo)寬度 */
            height: 32px; /* 圖標(biāo)高度 */
            fill: #333;   /* 圖標(biāo)顏色 */
            margin: 10px;
        }
        .icon:hover {
            fill: #ff0000; /* 懸停時(shí)的顏色 */
        }
    </style>
</head>
<body>
    <!-- 使用圖標(biāo) -->
    <svg class="icon" aria-hidden="true">
        <use xlink:href="#icon-example" rel="external nofollow"  rel="external nofollow"  rel="external nofollow" ></use>
    </svg>
    <svg class="icon" aria-hidden="true">
        <use xlink:href="#icon-user" rel="external nofollow"  rel="external nofollow" ></use>
    </svg>
    <svg class="icon" aria-hidden="true">
        <use xlink:href="#icon-settings" rel="external nofollow"  rel="external nofollow" ></use>
    </svg>
</body>
</html>

步驟 3：自定義圖標(biāo)樣式

更改圖標(biāo)大小和顏色：

通過 CSS 可以輕松更改圖標(biāo)的大小和顏色。

.icon {
    width: 48px;  /* 圖標(biāo)寬度 */
    height: 48px; /* 圖標(biāo)高度 */
    fill: #ff6600;  /* 圖標(biāo)顏色 */
}

2.懸停效果：

你可以添加懸停效果來增強(qiáng)用戶體驗(yàn)。

.icon:hover {
    fill: #ff0000; /* 懸停時(shí)的顏色 */
}

JS使用方式完整示例

通過上述步驟，你可以在前端項(xiàng)目中輕松使用 iconfont.js 圖標(biāo)。以下是完整的示例代碼：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Iconfont Example</title>
    <script src="https://at.alicdn.com/t/font_1234567_abcd1234.js"></script> <!-- 替換為你的 iconfont.js 鏈接 -->
    <style>
        .icon {
            width: 48px;  /* 圖標(biāo)寬度 */
            height: 48px; /* 圖標(biāo)高度 */
            fill: #333;   /* 圖標(biāo)顏色 */
            margin: 10px;
        }
        .icon:hover {
            fill: #ff0000; /* 懸停時(shí)的顏色 */
        }
    </style>
</head>
<body>
    <!-- 使用圖標(biāo) -->
    <svg class="icon" aria-hidden="true">
        <use xlink:href="#icon-example" rel="external nofollow"  rel="external nofollow"  rel="external nofollow" ></use>
    </svg>
    <svg class="icon" aria-hidden="true">
        <use xlink:href="#icon-user" rel="external nofollow"  rel="external nofollow" ></use>
    </svg>
    <svg class="icon" aria-hidden="true">
        <use xlink:href="#icon-settings" rel="external nofollow"  rel="external nofollow" ></use>
    </svg>
</body>
</html>