如何在网站上使用 Font Awesome 图标

Font Awesome 是一套不可多得的开源的图标库,最新 5.0 版里面收集了 1609 个免费图标。使用 Hexo NexT 主题搭建博客的童鞋想必不会陌生,因为 NexT 主题整合了 Font Awesome 的样式,可以直接调用。那相对于一般的网站来说,该如何调用呢?

file

下载样式库

首先,我们需要下载 Font Awesome 的样式及图标库,可前往官网下载。

调用样式

样式库下载完成后,解压放到网站目录(也可以放到其他地方,能调用到就行),比如我将它重命名后放到 WordPress 的 uploads 目录。

然后在 <head> 代码中添加调用:

<!-- 添加 font-awesome 图标 -->
<link href="/wp-content/uploads/fontawesome/css/all.css" rel="stylesheet"> <!--load all styles -->

使用图标

完成以下步骤后,就能通过:<i class="fa fa-address-book" aria-hidden="true"></i> 的方式直接使用图标了。

使用步骤:

  1. 访问图标库
  2. 搜索喜欢的图标,选中后复制图标下面的代码;
    file
  3. 粘贴到需要的地方即可;

比如:

<i class="fa fa-battery-empty" aria-hidden="true"></i> battery empty
<i class="fa fa-battery-quarter" aria-hidden="true"></i> battery quarter
<i class="fa fa-battery-half" aria-hidden="true"></i> battery half
<i class="fa fa-battery-three-quarters" aria-hidden="true"></i> battery three quarters
<i class="fa fa-battery-full" aria-hidden="true"></i> battery full

显示效果如下:

battery empty
battery quarter
battery half
battery three quarters
battery full

PS:如果觉得官网访问慢,也可以使用中文网的图标,但图标个数较少,且从5.0开始收费。

发表评论

您的电子邮箱地址不会被公开。 必填项已用*标注

Captcha Code