[JavaScript知识库] 图标文字的下载和使用（iconfont）

开发: C++知识库 Java知识库 JavaScript Python PHP知识库人工智能区块链大数据移动开发嵌入式开发工具数据结构与算法开发测试游戏开发网络协议系统运维
教程: HTML教程 CSS教程 JavaScript教程 Go语言教程 JQuery教程 VUE教程 VUE3教程 Bootstrap教程 SQL数据库教程 C语言教程 C++教程 Java教程 Python教程 Python3教程 C#教程
数码: 电脑笔记本显卡显示器固态硬盘硬盘耳机手机 iphone vivo oppo 小米华为单反装机图拉丁

-> JavaScript知识库 -> 图标文字的下载和使用（iconfont） -> 正文阅读

[JavaScript知识库]图标文字的下载和使用（iconfont）

下载——传送门
解压后将文件夹中的css和webfonts这两个文件夹移到自己的项目里（且这两个文件夹最好党在同一级目录下）
引入all.css到网页中：

<link rel="stylesheet" href="css/all.css">

插入图像文字的三种方法
① 直接通过类名来使用，其中类名fas或fab部分是固定的，后边跟的fa--bell是具体使用的图标

<span class="fas fa-bell"></span>

② 使用实体：&#x ____;

<span class="fas">&#xf0f3;</span>

③ 使用伪元素

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <link rel="stylesheet" href="css/all.css">
    <title>Document</title>
</head>
<style>
    .box1{
        font-size: 50px;
        color: blue;
        font-family: 'Courier New', Courier, monospace;
    }
    .box1::before{
        content: "\f1b0";
        font-family: 'Font Awesome 5 Free';
        font-weight: 900;
        /* font-family: 'Font Awesome 5 Brands'; */
    }
</style>
<body>
    <div class="box1">
        凯梦兽
    </div>
</body>
</html>