Font Awesome

Font Awesome介绍

Font Awesome一套绝佳的图标字体库和CSS框架

Font Awesome是一款很流行的字体图标工具。随着Bootstrap的流行而逐渐被人所认识,现在FontAwesome不仅仅可以在bt上使用,还可以应用在各种web前端开发中。相对于传统的使用背景图片作为图标,字体图标主要是支持自适应、可以使用字体的各种特性(比如变色、变大变小、字体阴影等)、减少数据加载、样式更容易定义等。

Font Awesome 特性

  • 一个字体文件, 369 个图标。
  • 不需要JavaScript要求:更快的载入速度
  • 无限的可扩展性:可伸缩矢量图形意味着每一个图标在任何大小看起来真棒。
  • 自由免费:你可以将它应用到你的商业中。
  • CSS控制:轻松的定义图标的颜色,大小,阴影,和任何与CSS相关的特性。
  • 完美的视网膜显示:使用矢量字体,这意味着他们可以完美的显示在高分辨率显示器中
  • 为BootStrap而生:完全的兼容BootStrap新版3.0
  • 桌面友好:你可以查看字体的样式列表
  • 兼容屏幕阅读器:不像其他字体图标不兼容屏幕阅读器

Font Awesome的使用

方法1:CDN

直接在 html 文档头部引用 CDN 文件即可。

直接搜索最新可用的资源

方法2:下载使用

1)下载解压文件,包括css和fonts文件夹:css文件夹中有两个css文件(font-awesome.css和font-awesome.min.css),fonts下有有5个。

2)拷贝到项目中

3)引入样式文件,如下:

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

4)使用

<a href="#"><i class="fa fa-cog fa-fw"></i>  Settings</a>

资源:

https://fontawesome.dashgame.com/

Font Awesome 中文网:

http://www.fontawesome.com.cn/

http://caibaojian.com/fontawesome/get-started.html

https://www.bootcss.com/p/font-awesome/

https://github.com/FortAwesome/Font-Awesome

使用:


然重视此中的src:url()中的路径是不是当前与当前项目标实际路径向匹配。
4.最后在页面中参加响应的html元素,并且遵守font awesome定义好的样式为须要添加矢量图标的元素指定样式。:

别的,font awesome 和BootStrap连络可以达到更好的结果。