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

2017-7-20    藍(lán)藍(lán)設(shè)計(jì)的小編

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


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

 


 

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


 

 

 

使用方法

使用 LESS 模式:

  1. 拷貝 elusive-iconfont 目錄到你的項(xiàng)目中;
  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;
}

然后重新進(jìn)行 LESS 編譯就可以了。

使用 CSS 模式:

  1. 拷貝 Elusive Icons 字體目錄到項(xiàng)目中;
  2. 拷貝 elusive-webfont.css 文件到項(xiàng)目中;
  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 主頁     猛擊下載

 

您可能感興趣的相關(guān)文章

 

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

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















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

分享本文至:

日歷

鏈接

個(gè)人資料

存檔