Elusive Icons 是一套网页字体图标,可用于任何项目。这套图标集包含270款圆滑的矢量图标,特别适合基于 Twitter Bootstrap 的项目。它使用的是开源的字体,在项目中使用没有任何授权的问题。
如果你不那么在意许可证,那么还有很多类似的字体图标库可以使用,最引人注目的是 Font Awesome。下载此字体时,你还会收到所有 SVG 格式的矢量图标,这样你就可以修改这些字体,使其更加完善,并贡献到 Github 上面。
这套精美的 Twitter Boostrap 矢量图标集除了包括 Boostrap 的默认图标外,还有社交网络图标和常用的网页图标。
使用方法
使用 LESS 模式:
- 拷贝 elusive-iconfont 目录到你的项目中;
- 拷贝 elusive-webfont.less 文件到 bootstrap/less 目录。
- 打开 bootstrap.less 文件并替换 @import "sprites.less"; 为 @import "elusive-webfont.less";
- 编辑 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 模式:
- 拷贝 Elusive Icons 字体目录到项目中;
- 拷贝 elusive-webfont.css 文件到项目中;
- 修改 elusive-webfont.css 文件中的字体路径到正确的位置(和LESS方式类似);
- 在页面的 head 里引入 elusive-webfont.css 文件:
1
2
|
<link rel=
"stylesheet"
href=
"../css/bootstrap.css"
>
<link rel=
"stylesheet"
href=
"../css/elusive-webfont.css"
>
|