图标字体制作工具栏

图标字体

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

• 减少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>