Font Awesome:Boostrap 矢量字体图标

Font Awesome 是专门为 Twitter Bootstrap 设计的一套图标字体库,它几乎囊括了网页中可能用到的所有图标,通过Web Font的方式来显示图标。

正如其官方网站上所说的:

Font Awesome gives you scalable vector icons that can instantly be customized — size, color, drop shadow, and anything that can be done with the power of CSS.

好处就是图标可以任意缩放、改变颜色,你可以像修改文字样式那样修改图标样式,非常方便易用。

主要特色:

  •  一种字体,302个图标,是网页操作的象形语言
  •  纯 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 href=”../css/bootstrap.min.css” rel=”stylesheet” />
<link href=”../css/font-awesome.min.css” rel=”stylesheet” />

使用 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 编译就可以了。

另:Elusive Icons 也是一套网页字体图标,可用于任何项目,这套图标库目前包含283款圆滑的矢量图标
使用方法
使用 CSS 模式:
拷贝 Elusive Icons 字体目录到项目中;
拷贝 elusive-webfont.css 文件到项目中;
修改 elusive-webfont.css 文件中的字体路径到正确的位置(和LESS方式类似);
在页面的 head 里引入 elusive-webfont.css 文件:

<link href=”../css/bootstrap.css” rel=”stylesheet” />
<link href=”../css/elusive-webfont.css” rel=”stylesheet” />

使用 LESS 模式:
拷贝 elusive-iconfont 目录到你的项目中;
拷贝 elusive-webfont.less 文件到 bootstrap/less 目录。
打开 bootstrap.less 文件并替换 @import “sprites.less”; 为 @import “elusive-webfont.less”;
编辑 elusive-webfont.less 文件,让字体路径指向正确的位置:

@font-face {
  font-family: 'Elusive-Icons';
  src:url('../font/Elusive-Icons.eot');
  src:url('../font/Elusive-Icons.eot?#iefix') format('embedded-opentype'),
    url('../font/Elusive-Icons.svg#Elusive-Icons') format('svg'),
    url('../font/Elusive-Icons.woff') format('woff'),
    url('../font/Elusive-Icons.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
}

然后重新进行 LESS 编译就可以了。
项目地址:https://github.com/aristath/elusive-iconfont/

这篇文章目前没有评论

Leave a Reply

(必填项)

(必填项)

(可选)