引用文件

发现两种方法都可以使用，需要在<head>标签内添加。

<script src="/fontawesome@6.4.0/js/all.js" crossorigin="anonymous"></script>

script标签的方法不推荐使用

<link href="/fontawesome@6.4.0/css/all.min.css" rel="stylesheet">

下载地址

当然也可以自建，以下是提供Font awesome PRO 6.4.0版本的下载方式。

123云盘下载：
蓝奏云下载：
自建网盘下载：

输出渲染

输出图标目前常用有三种

<i class="fa-duotone fa-house"></i>
<span class="fa-duotone fa-house"></span>
<a href="" class="fa-duotone fa-house"></a>

自建资源教程

下载文件仅用于web前端开发

解压文件

将下载的压缩包解压后，得到下面目录结构内容。

|-/css/       # 用于web开发时候使用，一般情况下只需引用这里的all.min.css即可正常使用fontawesome字体图标了）
|-/js/        # 用于一些高级用法比如配合svg使用，以及图标/动画/旋转/蒙版/等等）
|-/less/      # 字体图标 Less 样式文件
|-/metadata/  # 图标集 Meta 数据文件
|-/scss/      # 字体图标 Scss 样式文件
|-/sprites/   # 字体图标 SVG合集文件
|-/svgs/      # 这里有全部的单独的svg图标，可以用于PPT/Axure/等原型软件
|-/webfonts/  # 核心字体文件

结尾带min的是压缩过的文件，内容等同于原始文件。

布置css和fonts

  • 将/css目录下的all.min.css复制到你的项目中对应的css目录。
  • 将/webfonts目录复制到你项目中对应的静态文件目录。
  • 在你的html中引入all.min.css文件

  • 搞定！

    <head>
<!-- 这里要注意你的文件相对路径 -->
<link href="/css/fontawesome.css" rel="stylesheet">
</head>

基础使用方法

按上面的操作引入css之后，就可以在你的html里加入图标代码了。
下面几种写法都可以，只不过一般都用在i标签上。

<i class="fas fa-camera"></i>
<span class="fas fa-camera"></span>
<a href="" class="fas fa-camera"></a>

fontawesome主要是通过css引入字体文件实现显示图标。
其中在class中有2个主要内容。

  1. 标识图标样式的：用fas,far,fal,fad。其中

    • fas: 实体样式
    • far: 常规样式
    • fal: 线条样式
    • fad: 双色样式
    • fab: 品牌图标
  2. fa-xxxx其中xxxx就是图标的名称，比如：相机图标（fa-camera）

更多用法请前往官方网站

Font Awesome

全部图标使用方法

最后修改：2024 年 07 月 26 日
© 允许规范转载
如果觉得我的文章对你有用，请随意赞赏