前端Boostrap系列之一：稀世珍宝：270款圆滑的 Twitter Boostrap 矢量图标

2017-7-20 蓝蓝设计的小编

如果您想订阅本博客内容，每天自动发到您的邮箱中，请点这里

如果你不那么在意许可证，那么还有很多类似的字体图标库可以使用，最引人注目的是 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 主页猛击下载

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

前端Boostrap系列之一：稀世珍宝：270款圆滑的 Twitter Boostrap 矢量图标

使用方法

使用 LESS 模式：

使用 CSS 模式：

您可能感兴趣的相关文章

推荐博文

分类

日历

链接

个人资料

存档