前端Boostrap系列之一:稀世珍寶:270款圓滑的 Twitter Boostrap 矢量圖標

2017-7-20    藍藍設計的小編

如果您想訂閱本博客內容,每天自動發(fā)到您的郵箱中, 請點這里


如果你不那么在意許可證,那么還有很多類似的字體圖標庫可以使用,最引人注目的是 Font Awesome。下載此字體時,你還會收到所有 SVG 格式的矢量圖標,這樣你就可以修改這些字體,使其更加完善,并貢獻到 Github 上面。

 


 

這套精美的 Twitter Boostrap 矢量圖標集除了包括 Boostrap 的默認圖標外,還有社交網(wǎng)絡圖標和常用的網(wǎng)頁圖標。


 

 

 

使用方法

使用 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-weightnormal;
  font-stylenormal;
}

然后重新進行 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">

 

Twitter Boostrap     Elusive Icons 主頁     猛擊下載

 

您可能感興趣的相關文章

 

本文鏈接:稀世珍寶:270款圓滑的Twitter Boostrap矢量圖標

編譯來源:夢想天空 ◆ 關注前端開發(fā)技術 ◆ 分享網(wǎng)頁設計資源















藍藍設計yvirxh.cn )是一家專注而深入的界面設計公司,為期望卓越的國內外企業(yè)提供卓越的UI界面設計BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網(wǎng)站建設 、平面設計服務

日歷

鏈接

個人資料

藍藍設計的小編 http://yvirxh.cn

存檔