<!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="./fa/css/all.css">
<style>
li{
list-style: none;
}
li::before{
/*
通过伪元素来设置图标字体
1.找到要设置图标的元素通过before或after选中
2.在content中设置字体的编码
3.设置字体的样式
fab
font-family: 'Font Awesome 5 Brands';
fas
font-family: 'Font Awesome 5 Free';
font-weight: 900;
*/
content:'\f1b0';
font-family: 'Font Awesome 5 Free';
font-weight: 900;
color: blue;
margin-right: 10px;
}
li::after{
content:'\f1b0';
font-family: 'Font Awesome 5 Free';
font-weight: 900;
color: orange;
margin-right: 10px;
}
</style>
</head>
<body>
<ul>
<li>AAAAAAAAAA</li>
<li>BBBBBBBBBB</li>
<li>CCCCCCCCCC</li>
<li>DDDDDDDDDD</li>
</ul>
</body>
</html>
