css字體圖標(biāo)引入方法
在網(wǎng)頁中將小圖標(biāo)制作成字體是很多網(wǎng)站的常用做法缩赛，為的是減少頁面請求。
先推薦一個字體圖標(biāo)庫 阿里巴巴矢量圖標(biāo)庫
一峦筒、首先根據(jù)項(xiàng)目按需選擇好自己需要的圖標(biāo)物喷，添加至入庫
image
二、都選好后扇丛，將庫中的圖標(biāo)添加至項(xiàng)目中尉辑，沒有項(xiàng)目可先創(chuàng)建項(xiàng)目隧魄，添加在項(xiàng)目里后，將項(xiàng)目下載至本地，解壓出來即可
image
三馍悟、最后就可以在代碼中引入圖標(biāo)了（字體圖標(biāo)文件里的html文件里可打開查看圖標(biāo)的代碼）
注意：需要在@foot-face中修改url地址，定位到字體圖標(biāo)文件夾中方可引入成功
<!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>
/* 引入字體圖標(biāo) */
@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" >
</head>
<body>
<i class="iconfont icon-renwu"></i>
</body>
</html>
