搜索图标 v5.15
去搜索v4.7图标
一个字库,海量图标
仅一个Font Awesome字库,就包含了与网页相关的所有形象图标。
无需依赖JavaScript
Font Awesome完全不依赖JavaScript,因此无需担心兼容性。
无限缩放
无论在任何尺寸下,可缩放的矢量图形都会为您呈现出完美的图标。
完全开源免费
Font Awesome完全免费,哪怕是商业用途。
CSS控制
只要CSS支持,无论颜色、大小、阴影或者其它任何效果,都可以轻易展现。
高分屏完美呈现
Font Awesome的矢量图标,将使您的网站在视网膜级的高分屏上大放异彩。
完美兼容其它框架
尽管是为Bootstrap设计,但Font Awesome同样能与其它框架完美协同运作。
兼容桌面级应用
如果你需要用于桌面软件设计或一套完整的矢量图。
可适配于屏幕阅读器
与其它字体不同,Font Awesome不会影响屏幕阅读器正常工作。
实心图标
常规图标
品牌图标
使用方式:CDN加载

1、一句话将Font Awesome加入您的网页中。您完全不用下载或者安装任何东西!

2、将以下代码粘贴到网页HTML代码的 <head> 部分。

<link href="cdn.bootcdn.net/ajax/libs/font-awesome/5.15.3/css/all.min.css" rel="stylesheet">

3、参考示例,然后开始使用Font Awesome吧!

使用方式:使用默认CSS

1、复制整个font5-awesome 文件夹到您的项目中。

2、在HTML的 <head> 中引用font5-awesome.min.css。

<link href="path/to/font5-awesome/css/font5-awesome.min.css" rel="stylesheet">

3、参考示例,然后开始使用Font Awesome吧!

基本图标
fa-camera-retro
您可以将Font Awesome图标使用在几乎任何地方,只需要使用CSS前缀 fa ,再加上图标名称。 Font Awesome是为使用内联元素而设计的。我们通常更喜欢使用 <i> ,因为它更简洁。 但实际上使用 <span> 才能更加语义化。
<i class="fas fa-camera-retro"></i> fa-camera-retro
固定宽度
  首页
  编辑
  分类
  设置
使用 fa-fw 可以将图标设置为一个固定宽度。主要用于不同宽度图标无法对齐的情况。 尤其在列表或导航时起到重要作用。
<i class="fas fa-home fa-fw"></i> fa-home
<i class="fas fa-book fa-fw"></i> fa-book
<i class="fas fa-list fa-fw"></i> fa-list
<i class="fas fa-cog fa-fw"></i> fa-cog
动画
  fa-spinner
  fa-cog
  fa-spinner
使用 fa-spin 类来使任意图标旋转,现在您还可以使用 fa-pulse 来使其进行8方位旋转。尤其适合 fa-spinnerfa-refreshfa-cog
<i class="fas fa-spinner fa-spin"></i> fa-spinner
<i class="fas fa-cog fa-spin"></i> fa-cog
<i class="fas fa-spinner fa-pulse"></i> fa-spinner
组合使用

如果想要将多个图标组合起来,使用 fa-stack 类作为父容器, fa-stack-1x 作为正常比例的图标, fa-stack-2x 作为大一些的图标。还可以使用css样式切换图标颜色。您可以在父容器中通过添加大图标类来控制整体大小。
<span class="fa-stack fa-lg">
   <i class="fas fa-square-o fa-stack-2x"></i>
   <i class="fas fa-twitter fa-stack-1x"></i>
</span>

<span class="fa-stack fa-lg">
   <i class="fas fa-camera fa-stack-2x"></i>
   <i class="fas fa-ban fa-stack-1x" style="color:#a94442;"></i>
</span>

Font Awesome 4.7.0 GitHub项目

邮箱:717532053@qq.com 支持:方果科技 豫ICP备16029994号