css設置列表樣式圖標

本文轉載自查看原文 2021-04-17 19:19 271

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

免責聲明！

本站轉載的文章為個人學習借鑒使用，本站對版權不負任何法律責任。如果侵犯了您的隱私權益，請聯系本站郵箱yoyou2525@163.com刪除。

猜您在找 CSS：列表樣式（設置列表項的標志圖案/位置）文件圖標css樣式 CSS Ul（列表樣式） css中的列表樣式 ToolBar樣式顏色，圖標設置 CSS select樣式列表-------美化列表 css設置ul的各種樣式 jQuery設置樣式css ReactJs設置css樣式 CSS - 設置placeholder樣式