2015.3.25 boostrap小尝试之iconfont的使用

昨天到今天一直在做一个作业，遇到了很多按钮前面需要有一个类似于



的图标加字体，之前遇到这种的做法就是用截图然后用图片加字体的方式排列出来。昨天正式开始使用boostrap之后发现了iconfont的使用。

但网上的教程都好不详细，导致我昨晚没有试验成功，今早成功之后，马上来更一篇无比详细的教程。

首先来讲一下什么是iconfonts：字体图标是在 Web 项目中使用的图标字体。之前看到W3C里提到了webfonts的应用，可能以后webfont的使用会更加广泛。

下面是安装使用教程：

第一步：下boostrap的时候里头会带着一个默认的fonts包叫做

Glyphicons

看到没有，第三个就是默认自带的font包。我就使用的是这个，其他的自己下载的使用方式和这个应该是一样的。

第二步：把这个font中的文件夹引入到你的项目中



我是这样做的。

这里要说一下为什么要引入这么多文件呢？

因为兼容性咯，不同版本的浏览器对iconfont的支持性不一样，所以需要单独声明和引入不同的font文件。这里不禁要吐槽一句，为什么不能给浏览器统一标准，统一标准不就没有兼容性问题了么。

第三步：单独建立一个icon.css样式表，在html文件中引入，这个不用详细说了吧。

然后在css文件中写上如下内容：（可以直接复制，但有一点要注意是url的问题，一定要保证是正确的地址）

@font-face {
font-family: 'Glyphicons Halflings';
src: url('../fonts/glyphicons-halflings-regular.eot');
src: url('../fonts/glyphicons-halflings-regular.eot?#iefix') format('embedded-opentype'),
url('../fonts/glyphicons-halflings-regular.woff') format('woff'),
url('../fonts/glyphicons-halflings-regular.ttf') format('truetype'),
url('../fonts/glyphicons-halflings-regular.svg#glyphicons_halflingsregular') format('svg');
}

.glyphicon {
position: relative;
top: 1px;
display: inline-block;
font-family: 'Glyphicons Halflings';
-webkit-font-smoothing: antialiased;
font-style: normal;
font-weight: normal;
line-height: 1;
-moz-osx-font-smoothing: grayscale;
}
.glyphicon:empty {
width: 1em;
}

第四步：

当然就是使用了，我这里用一个例子：

<a href="#" class="btn btn-info btn-lg">
<span class="glyphicon glyphicon-tags"></span> 上传稿件
</a>

就是我最开始的截图里的按钮式的一个图标字体。

Ok，写完啦~我要继续求做欢乐的小前端码农啦~