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

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

您可能感兴趣的相关文章

  • 让人爱不释手的13套精美网页图标素材
  • 分享25套非常漂亮的免费网页图标素材
  • 网页素材大宝库:50套精美的图标素材
  • 分享20个非常不错的 UI 图标素材资源
  • 分享18套精美的苹果风格免费图标素材

 

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

 

稀世珍宝:270款圆滑的 Twitter Boostrap 矢量图标_第1张图片

 

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

 

稀世珍宝:270款圆滑的 Twitter Boostrap 矢量图标_第2张图片

 

稀世珍宝:270款圆滑的 Twitter Boostrap 矢量图标_第3张图片

 

稀世珍宝:270款圆滑的 Twitter Boostrap 矢量图标_第4张图片

使用方法

  使用 LESS 模式:

  1. 拷贝 elusive-iconfont 目录到你的项目中;
  2. 拷贝 elusive-webfont.less 文件到 bootstrap/less 目录。
  3. 打开 bootstrap.less 文件并替换 @import "sprites.less"; 为 @import "elusive-webfont.less";
  4. 编辑 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 编译就可以了。

  使用 CSS 模式:

  1. 拷贝 Elusive Icons 字体目录到项目中;
  2. 拷贝 elusive-webfont.css 文件到项目中;
  3. 修改 elusive-webfont.css 文件中的字体路径到正确的位置(和LESS方式类似);
  4. 在页面的 head 里引入 elusive-webfont.css 文件:
<link rel="stylesheet" href="../css/bootstrap.css">
<link rel="stylesheet" href="../css/elusive-webfont.css">

 

Twitter Boostrap      Elusive Icons 主页      猛击下载

 

您可能感兴趣的相关文章

  • 让人爱不释手的13套精美网页图标素材
  • 分享25套非常漂亮的免费网页图标素材
  • 网页素材大宝库:50套精美的图标素材
  • 分享20个非常不错的 UI 图标素材资源
  • 分享18套精美的苹果风格免费图标素材

 

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

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

hide

本文链接

你可能感兴趣的:(twitter,boostrap,矢量)