Fontawesome中文网

用于web前端开发

下面教程针对于web前端开发人员。

#解压文件

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

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

tips：结尾带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），你可以试试