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，写完啦~我要继续求作欢乐的小前端码农啦~