Font Awesome:精心打造的 Twitter Boostrap 矢量字体图标

简介:   Font Awesome 是一套专门为 Twitter Boostrap 设计的图标字体库。这套图标字体集几乎囊括了网页中可能用到的所有图标,除了包括 Twitter Boostrap 的默认图标外,还有社交网络图标、Web 应用程序图标和编辑器图标等等,可以免费用于商业项目。

  Font Awesome 是一套专门为 Twitter Boostrap 设计的图标字体库。这套图标字体集几乎囊括了网页中可能用到的所有图标,除了包括 Twitter Boostrap 的默认图标外,还有社交网络图标、Web 应用程序图标和编辑器图标等等,可以免费用于商业项目。

 

 

  主要特色:

  •  一种字体,249个图标,是网页操作的象形语言;
  •  纯 CSS 控制,能够轻松定义图标的颜色、大小、阴影以及任何 CSS 能够实现的效果;
  •  无限缩放,矢量图标在任何尺寸下都一模一样;
  •  免费使用,包括商业和非商业项目;
  •  支持 Internet Explorer 7 浏览器;
  •  能够在 Retina 屏幕完美呈现;
  •  完全兼容 Twitter Boostrap 最新版本;
  •  对设计师友好,设计师能够轻松使用;
  •  和其它图标字体不同,兼容屏幕阅读器;

 

使用方法

  使用 CSS:

  1. 拷贝 Font Awesome 字体目录到项目中;
  2. 拷贝 font-awesome.min.css 文件到项目中;
  3. 修改 font-awesome.min.css 文件中的字体路径到正确的位置;
  4. 在页面的 head 里引入 font-awesome.min.css 文件:
<link rel="stylesheet" href="../css/bootstrap.min.css">
<link rel="stylesheet" href="../css/font-awesome.min.css">

 

  使用 LESS:

  1. 拷贝 Font Awesome 字体目录到你的项目中;
  2. 拷贝 font-awesome.less 文件到 bootstrap/less 目录。
  3. 打开 bootstrap.less 文件并替换 @import "sprites.less"; 为 @import "font-awesome.less";
  4. 编辑 elusive-webfont.less 文件的 @FontAwesomePath 变量为字体路径:
@FontAwesomePath:   "../font";

  然后重新进行 LESS 编译就可以了。

 

Github     官方主页     猛击下载

 

  如何 GitHub 无法访问,可能需要配置 hosts 才能访问:

207.97.227.239 github.com 
207.97.227.252 nodeload.github.com 
207.97.227.243 raw.github.com 
204.232.175.78 documentcloud.github.com

您可能感兴趣的相关文章

 

本文链接:稀世珍宝:270款圆滑的Twitter Boostrap矢量图标

编译来源:梦想天空 ◆ 关注前端开发技术 ◆ 分享网页设计资源

作者:山边小溪
主站:yyyweb.com 记住啦:)
欢迎任何形式的转载,但请务必注明出处。

相关文章
|
5月前
|
前端开发
Font Awesome 一套绝佳的图标字体库和CSS框架
Font Awesome 一套绝佳的图标字体库和CSS框架
31 0
|
10月前
|
前端开发 开发者
前端封装库/工具库的字体/图标之Font Awesome
随着前端技术的不断演进,前端封装库/工具库在Web开发中扮演着越来越重要的角色。其中,字体/图标工具库可以为Web应用程序提供美观、一致和易于管理的图标。而Font Awesome是一个非常受欢迎和广泛使用的字体/图标库。今天我们将探讨一下Font Awesome这个实用工具库。
288 1
|
开发者
Font-Awesome如何引入矢量字体图标
在开发网页的过程中,我们会经常需要用到一些小图标来进行形象地说明解释或者装饰网页,但是传统的图片引用方式引入的的是图像图标,不易修改,而矢量字体图标则能很好地解决这一问题,因为矢量字体图标的本质是字体,可以使用“<style>”标签对其属性进行修改,非常方便,已经被广泛应用于网页开发中!本文主要介绍font-awesome-4.7.0的引入和使用
300 0
Font-Awesome如何引入矢量字体图标
|
Web App开发 前端开发 JavaScript
Amazing!巧用 CSS 视差实现酷炫交互动效
Amazing!巧用 CSS 视差实现酷炫交互动效
201 0
Amazing!巧用 CSS 视差实现酷炫交互动效
|
前端开发 JavaScript
Amazing!!CSS 也能实现极光?
Amazing!!CSS 也能实现极光?
181 0
Amazing!!CSS 也能实现极光?
|
前端开发 JavaScript
《css大法》之使用伪元素实现超实用的图标库(附源码)
今天我们来复盘一下前端中css伪元素的知识以及如何用css伪元素来减轻javascript的压力,做出一些脑洞大开的图形。
429 0
|
前端开发 JavaScript
CSS 实现 Ant Design官网Logo彩蛋效果
CSS 实现 Ant Design官网Logo彩蛋效果
CSS 实现 Ant Design官网Logo彩蛋效果
|
前端开发
值得把玩的各色CSS气泡!【精通CSS100例】
值得把玩的各色CSS气泡!【精通CSS100例】
值得把玩的各色CSS气泡!【精通CSS100例】
|
XML 前端开发 数据格式
那些酷炫的网页你也可以做到——第七篇(初识“CSS“)
那些酷炫的网页你也可以做到——第七篇(初识“CSS“)
135 0
那些酷炫的网页你也可以做到——第七篇(初识“CSS“)
|
前端开发
一个简单易用的图标字体库和CSS框架fontawesome
一个简单易用的图标字体库和CSS框架fontawesome
108 0
一个简单易用的图标字体库和CSS框架fontawesome