图标字体制作工具栏

图标字体

图标字体是字体文件，使用符号（如箭头等）代替数字文字字符。相对于使用背景图片制作图标的方法，使用图标字体具有如下优点

减少HTTP请求，节约性能

增加灵活性，可以为图标添加字体样式（如改变颜色、使用font-size改变字体大小）

使用图标字体也有一些劣势，如

版权限制，自己制作图标字体花费时间较长

用图标字体制作的页面html/css结构要比使用背景图片复杂

使用图标字体实现工具栏

从iconfont下载图标字体

选择需要的图标字体，添加进购物车后，下载到本地



下载好的目录结构如下



将以上文件添加到css目录下



将iconfont.css中的样式赋值到自己的css文件中，对@font-face中的url进行调整



将对应的class添加到html文件中

<div class="toolbar">
<a href="#" class="toolbar-item">
<span class="icon-icondownload"></span>
</a>
<a href="#" class="toolbar-item">
<span class="icon-iconfontweixin1"></span>
</a>
<a href="#" class="toolbar-item" >
<span class="icon-iconfonttop"></span>
</a>
</div>