03.图标字体作为伪元素
作者：互联网
<!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>Document</title>
<link rel="stylesheet" href="./fontawesome/css/all.css">
<style>
li{
list-style:none;
}
li::before{
/*
通过伪元素来设置图标字体
1.找到要设置图标的元素通过before或after选中
2.在content中设置字体的编码（zeal里，表格最右侧）
3.设置字体的样式
*/
/* fas */
content: '\f1b0';
font-family:'Font Awesome 6 Free';
font-weight: 900;
/* 在all.css文件中ctrl+f查找到fas或fab的样式 */
/* fab */
content: '\f368';
font-family:'Font Awesome 6 Brands';
font-weight: 400;
/* fab的font-weight不写也可以 */
color:blue;
margin:20px;
}
</style>
</head>
<body>
<ul>
<li>锄禾日当午</li>
<li>汗滴禾下土</li>
<li>谁知盘中餐</li>
<li>粒粒皆辛苦</li>
</ul>
</body>
</html>
标签：03,weight,content,字体,fab,font,图标 来源： https://www.cnblogs.com/sherryyuan/p/16418199.html