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 文件，讓字體路徑指向正確的位置：
@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 文件：
<link rel="stylesheet" href="../css/bootstrap.css"> <link rel="stylesheet" href="../css/elusive-webfont.css">
Twitter Boostrap Elusive Icons 主頁 猛擊下載
您可能感興趣的相關文章