阿里巴巴矢量图标引入方法
作者：互联网
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"></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"></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>
标签：阿里巴巴,url,矢量,iconfont,字体,foot,font,图标 来源： https://blog.csdn.net/Wjc_1hh/article/details/117258482