123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354 |
- <!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>
- /*
- 通过伪元素来设置图标字体
- 1、找到要设置图标的元素,通过before或after选中
- 2、在content中设置字体的编码(在离线文档的右侧)
- 3、设置字体的样式
- -fab格式
- font-family:'Font Awesome 5 Brands'
- -fas格式
- font-family:'Font Awesome 5 Free';
- font-weight:900;
- */
- li{
- list-style: none;
- }
- li::before{
- content: '\f1b0';
- font-family: 'Font Awesome 5 Free';
- font-weight:900;
- color: blue;
- margin-right: 10px;
- }
- </style>
- </head>
- <body>
-
- <!-- <i class="fas fa-cat"></i> -->
- <ul>
- <li>锄禾日当午</li>
- <li>汗滴禾下土</li>
- <li>谁知盘中餐</li>
- <li>粒粒皆辛苦</li>
- </ul>
- <!--
- 通过实体来使用图标字体:
- &#x图标的编码;
- -->
- <span class="fas"></span>
- </body>
- </html>
|