Twitter Boostrap 矢量图标

　Elusive Icons 是一套网页字体图标，可用于任何项目。这套图标集包含270款圆滑的矢量图标，特别适合基于 Twitter Bootstrap 的项目。它使用的是开源的字体，在项目中使用没有任何授权的问题。　

如果你不那么在意许可证，那么还有很多类似的字体图标库可以使用，最引人注目的是 Font Awesome。下载此字体时，你还会收到所有 SVG 格式的矢量图标，这样你就可以修改这些字体，使其更加完善，并贡献到 Github 上面。

 

 

　　这套精美的 Twitter Boostrap 矢量图标集除了包括 Boostrap 的默认图标外，还有社交网络图标和常用的网页图标。

 

 

 

使用方法

　　使用 LESS 模式：

1. 拷贝 elusive-iconfont 目录到你的项目中；
2. 拷贝 elusive-webfont.less 文件到 bootstrap/less 目录。
3. 打开 bootstrap.less 文件并替换 @import "sprites.less"; 为 @import "elusive-webfont.less";
4. 编辑 elusive-webfont.less 文件，让字体路径指向正确的位置：

1 2 3 4 5 6 7 8 9 10

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

　　使用 CSS 模式：

1. 拷贝 Elusive Icons 字体目录到项目中；
2. 拷贝 elusive-webfont.css 文件到项目中；
3. 修改 elusive-webfont.css 文件中的字体路径到正确的位置（和LESS方式类似）；
4. 在页面的 head 里引入 elusive-webfont.css 文件：

1 2	<link rel= "stylesheet"  href= "../css/bootstrap.css" > <link rel= "stylesheet"  href= "../css/elusive-webfont.css" >