图标字体制作工具栏

最新推荐文章于 2021-06-04 17:19:33 发布

原创最新推荐文章于 2021-06-04 17:19:33 发布 · 595 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#图标字体

本文介绍图标字体的概念及其在网页设计中的应用。图标字体作为一种特殊字体文件，能够通过符号替代传统字符，有效减少HTTP请求并提高页面加载速度。此外，文章还讲解了如何使用iconfont平台下载图标字体，并给出了具体的实现步骤。

图标字体

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

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