阿里巴巴矢量图标引入方法

article/2025/9/24 1:34:12

css字体图标引入方法
在网页中将小图标制作成字体是很多网站的常用做法，为的是减少页面请求。

先推荐一个字体图标库（阿里巴巴矢量图标库）

https://www.iconfont.cn/

一、首先根据项目按需选择好自己需要的图标，添加至入库

二、都选好后，将库中的图标添加至项目中，没有项目可先创建项目，添加在项目里后，将项目下载至本地，解压出来即可

三、最后就可以在代码中引入图标了（字体图标文件里的html文件里可打开查看图标的代码）

注意：需要在@foot-face中修改url地址，定位到字体图标文件夹中方可引入成功

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title></title><style>/* 引入字体图标 */@font-face {font-family: 'iconfont';src: url('foot/iconfont.woff2?t=1621044854968') format('woff2'),url('foot/iconfont.woff?t=1621044854968') format('woff'),url('foot/iconfont.ttf?t=1621044854968') format('truetype');}/* 定义使用 iconfont 的样式 */.iconfont {font-family: "iconfont" !important;font-size: 16px;font-style: normal;-webkit-font-smoothing: antialiased;-moz-osx-font-smoothing: grayscale;}</style>
</head>
<body><i class=".iconfont">&#xe66b;</i>
</body></html>

方式二

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title></title><link rel="stylesheet" href="iconfont.css">
</head>
<body><i class="iconfont">&#xe66b;</i>
</body></html>

方式三

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title></title><link rel="stylesheet" href="iconfont.css">
</head>
<body><i class="iconfont icon-renwu"></i>
</body></html>

方式四

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title></title><script src="iconfobt.js"></script>
</head>
<body><i class="iconfont icon-renwu"></i>
</body></html>

方式五


<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title></title><link rel="stylesheet" href="http://at.alicdn.com/t/font_2564332_bri8xo00ao8.css">
</head>
<body><i class="iconfont icon-renwu"></i>
</body></html>