I'm starting to provide Chinese / English versions of some posts, switch with the Language menu above. 我开始提供部分文章的中文、英文翻译,请使用顶部语言菜单切换。

Font Awesome 图标字体使用

Font Awesome 是一个图标库开源项目,它目前最新的 4.1 版本提供了 439 个矢量图标,可以匹配各种大小和各种分辨率的屏幕,而它是作为一个字体存在,71KB 的一个文件就包括了这些图标。这些图标风格统一,可以很方便地用在各种地方。

1. 安装

首先下载 Font Awesome:https://fortawesome.github.io/Font-Awesome/assets/font-awesome-4.1.0.zip

然后解压,把里面的文件上传到你的网站。

然后在网页的 head 标签部分加入以下代码:

<link rel="stylesheet" href="http://你的网站/文件夹/font-awesome/css/font-awesome.min.css">

这样就安装完成了。

2. 使用

https://fortawesome.github.io/Font-Awesome/icons/ 这里有一张表,对应着图标的 class 名称,找到你要的图标,比如 fa-cloud,然后在你的网页代码里插入:

<i class="fa fa-cloud"></i>

效果:

如果你需要放大图标,那么就增加一个类 fa-lg,或 fa-2x,fa-3x,fa-4x,fa-5x。

<i class="fa fa-cloud fa-lg"></i>
<i class="fa fa-cloud fa-2x"></i>
<i class="fa fa-cloud fa-3x"></i>
<i class="fa fa-cloud fa-4x"></i>
<i class="fa fa-cloud fa-5x"></i>

效果:

同时还有一些图标是可以转的。

<i class="fa fa-spinner fa-spin"></i>
<i class="fa fa-circle-o-notch fa-spin"></i>
<i class="fa fa-refresh fa-spin"></i>
<i class="fa fa-cog fa-spin"></i>

效果:

用这些图标,可以更加直观地表现网站上的各个功能,同时不拖慢网站加载速度。

本站使用运行在 Vercel 上的 Waline 评论系统,中国大陆访问可能不稳定。