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

今天给大家推荐一套绝佳的图标字体库,使用起来非常简单方便。下面我们来一起看看:

Font Awesome为您提供可缩放的矢量图标,您可以使用CSS所提供的所有特性对它们进行更改,包括:大小、颜色、阴影或者其它任何支持的效果。

 a.一套字库, 675个图标

FontAwesome是一种带有网页功能的象形文字语言,并收集在一个集合里。

 b.不需要 JavaScript 支持

更少的兼容性问题,因为该字体不需要javascript

c.无限的扩展性

可缩放的矢量图形,每个图标在放大或者缩小的时候看起来都正常

 d.完全开源免费

该字体是完全开源并且免费的,查看许可证

 e.CSS 控制

可以轻松的用css来控制字体的颜色,大小,阴影等!

 f.完美支持Retina屏幕

字体是矢量图,这意味着在高分辨率下也会完美显示。

 g.良好的兼容性

最初是为Bootstrap而设计的,现在Font Awesome适用于所有框架。

 h.兼容桌面级应用

如果你需要用于桌面软件设计或一套完整的矢量图,请访问“http://www.fontawesome.com.cn/cheatsheet/”.

 i.兼顾可访问性

与其它字体不同,Font Awesome不会影响屏幕阅读器正常工作。

接下来说一下使用方法:

1.最简单的方式:BootstrapCDN (由MaxCDN提供)

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

<link href="//netdna.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">

demo:

<i class="fa fa-camera-retro"></i> fa-camera-retro

2.使用默认CSS

① 复制整个 font-awesome 文件夹到您的项目中。

② 在HTML的 <head> 中引用font-awesome.min.css。

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

demo:

使用 fa-lg (33%递增)、fa-2x、 fa-3x、fa-4x,或者 fa-5x 类 来放大图标。

<i class="fa fa-camera-retro fa-lg"></i>fa-lg

<i class="fa fa-camera-retro fa-2x"></i>fa-2x

<i class="fa fa-camera-retro fa-3x"></i>fa-3x

<i class="fa fa-camera-retro fa-4x"></i>fa-4x

<i class="fa fa-camera-retro fa-5x"></i>fa-5x

3.LESS Ruby Gem

使用 官方 Font Awesome LESS Ruby Gem 可以简单方便的将 Font Awesome LESS 集成到Rails项目中。由 @supercodepoet 维护。

①将下面这行代码加入到应用的Gemfile中:

gem 'font-awesome-less'

②然后执行:

$ bundle

③或者自行安装:

$ gem install font-awesome-less

4.SASS Ruby Gem

使用 官方 Font Awesome SASS Ruby Gem 可以简单方便的将 Font Awesome SASS 集成到Rails项目中。由 @supercodepoet 维护。

①将下面这行代码加入到应用的Gemfile中:

gem 'font-awesome-sass'

②然后执行:

$ bundle

③或者自行安装:

$ gem install font-awesome-sass

5.进阶方式:自定义 LESS 或 SASS

使用LESS或SASS的方法来自定义 Font Awesome 4.7.0 。

①复制 font-awesome/ 目录到您的项目中。

②打开 font-awesome/less/variables.less 文件或 font-awesome/scss/_variables.scss文件 ,然后修改 @fa-font-path 或 $fa-font-path 为您的字体目录。

@fa-font-path:   "../font";

如果使用了静态编译器,那么重新编译LESS或SASS文件。如果没有,那么现在应该一切OK了。

具体的详解实例可以官网查询

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 203,271评论 5 476
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 85,275评论 2 380
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 150,151评论 0 336
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 54,550评论 1 273
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 63,553评论 5 365
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 48,559评论 1 281
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 37,924评论 3 395
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 36,580评论 0 257
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 40,826评论 1 297
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,578评论 2 320
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,661评论 1 329
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 33,363评论 4 318
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 38,940评论 3 307
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 29,926评论 0 19
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,156评论 1 259
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 42,872评论 2 349
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 42,391评论 2 342

推荐阅读更多精彩内容