font.jpg
font.jpg

1.什么是Font Awesome?

  • Font Awesome是一套绝佳的图标字体库和CSS框架,它能应用到网站各处,本站就有许多它的应用,极大的减少了网站开发人员对按钮图标等等的工作量。
  • Font Awesome完全免费,可以自由使用。
  • Font Awesome创始人:戴夫·甘迪(Dave Gandy)

2.怎么将Font Awesome应用到我的网站?

  • 这里我介绍两种种简单的方法

① Font Awesome CDN 加速

此方法最为简单,只需填入自己的邮箱注册,然后就会收到一封带有Font Awesome CDN的js链接,只需将该标签插入到你网站的<head>中就可以了。

font.jpg
font.jpg

② 自己安装CSS文件

这个方法也很简单,如果你觉得使用Font Awesome CDN加载过慢,你就可以使用这个方法。

down.jpg
down.jpg

首先在Font Awesome中文网上下载Font Awesome安装包,将其中的.css解压出来,放到你网站的css文件夹中,在网站的<head>标签中加载font-awesome.min.css(代码如下)

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

3.安装完成后我能做哪些操作呢?

① 你可以在任意合适的地方引用它们,可以直接在Font Awesome 图标库中找到你想要的图标,引用方式如下

Hello World!
<i class="fa fa-grav" aria-hidden="true"></i>Hello World!

② 可以随意更改它的大小

<i class="fa fa-grav" aria-hidden="true"></i>fa-lg
<i class="fa fa-grav" aria-hidden="true"></i>fa-2x
<i class="fa fa-grav" aria-hidden="true"></i>fa-3x

以33% 递增

③ 使图标动起来,这个特别适合放置于网站的懒加载模块

<i class="fa fa-spinner fa-spin fa-3x fa-fw"></i>
<i class="fa fa-circle-o-notch fa-spin fa-3x fa-fw"></i>
<i class="fa fa-refresh fa-spin fa-3x fa-fw"></i>

Font Awesome中文网上有很多其它的应用方法,推荐大家有需求的话可以查看官方文档。