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

如果你不那么在意許可證，那么還有很多類似的字體圖標庫可以使用，最引人注目的是 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">

 

Twitter Boostrap     Elusive Icons 主頁     猛擊下載

 

您可能感興趣的相關文章

• 讓人愛不釋手的13套精美網頁圖標素材
• 分享25套非常漂亮的免費網頁圖標素材
• 網頁素材大寶庫：50套精美的圖標素材
• 分享20個非常不錯的 UI 圖標素材資源
• 分享18套精美的蘋果風格免費圖標素材

 

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

編譯來源：夢想天空 ◆ 關注前端開發技術 ◆ 分享網頁設計資源