图标字体iconfont

fontawesome使用步骤

1.[官网下载] (https://fa5.dashgame.com/#/)
或 npm install --save-dev @fortawesome/fontawesome-free
2.解压，将css和webfonts移动到项目目录下，且必须在同一层目录
3.根据类名使用
fas fa-camera
fab fa-accessible-icon

fontawesome参考手册

使用

1.直接使用

<div>
    <i class="fas fa-camera"></i>
    <i class="fas fa-camera" style="font-size: 30px; color: red;"></i>
    <i class="fab fa-accessible-icon"></i>
</div>
  <!--
            通过实体来设置图标字体
            &#x图标编码;
         -->
        <span class="fas" style="color: red;">&#xf069;</span>

2.通过伪元素设置图标字体

content: '\f0f3'; 设置图标编码
fab
font-family: 'Font Awesome 5 Brands';

fas
font-family: 'Font Awesome 5 Free';
font-weight: 900;

 li::before{
            content: '\f0f3';
            /* font-family: 'Font Awesome 5 Brands'; */
            font-family: 'Font Awesome 5 Free';
            font-weight: 900;
            margin-right: 10px;
            color: red;
         }