css字体图标引入方法
2021-05-20 本文已影响0人
oopsWeb
css字体图标引入方法
在网页中将小图标制作成字体是很多网站的常用做法，为的是减少页面请求。
先推荐一个字体图标库（阿里巴巴矢量图标库）
https://www.iconfont.cn/
一、首先根据项目按需选择好自己需要的图标，添加至入库
二、都选好后，将库中的图标添加至项目中，没有项目可先创建项目，添加在项目里后，将项目下载至本地，解压出来即可
1
2
3
三、最后就可以在代码中引入图标了（字体图标文件里的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>
<!-- <link rel="stylesheet" href="css/index.css"> -->
<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>
<p class=".iconfont"></p>
</body>
</html>
四、可选择第二种引入方式fontclass方式 使用link引入字体图标 更为推荐
<link rel="stylesheet" href="./icon-font/iconfont.css">
</head>
<body>
<i class="iconfont"></i>
</body>
