用于web前端开发
本教程是基于FontAwesome v5进行展开的。
下面教程针对于web前端开发人员。
1. 解压文件
将下载的压缩包解压后，得到下面目录结构内容。
|-/css/ # 用于web开发时候使用，一般情况下只需引用这里的all.min.css即可正常使用fontawesome字体图标了）
|-/js/ # 用于一些高级用法比如配合svg使用，以及图标/动画/旋转/蒙版/等等）
|-/less/ # 字体图标 Less 样式文件
|-/metadata/ # 图标集 Meta 数据文件
|-/scss/ # 字体图标 Scss 样式文件
|-/sprites/ # 字体图标 SVG合集文件
|-/svgs/ # 这里有全部的单独的svg图标，可以用于PPT/Axure/等原型软件
|-/webfonts/ # 核心字体文件tips：结尾带min的是压缩过的文件，内容等同于原始文件。
2. 布置css和fonts
- 将
/css目录下的all.min.css复制到你的项目中对应的css目录。 - 将
/webfonts目录复制到你项目中对应的静态文件目录。 - 在你的html中引入
all.min.css文件
<head>
<!-- 这里要注意你的文件相对路径 -->
<link href="/css/fontawesome.css" rel="stylesheet">
</head>3. 基础使用方法
按上面的操作引入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个主要内容。
- 标识图标样式的：用
fas,far,fal,fad。其中- fas: 实体样式
- far: 常规样式
- fal: 线条样式
- fad: 双色样式
- fab: 品牌图标
fa-xxxx其中xxxx就是图标的名称，比如：相机图标（fa-camera），你可以试试
