css设置列表样式图标 

<!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>

 

posted @ 2021-04-17 19:19  Hhhr  阅读(620)  评论(0)  编辑  收藏  举报