css高级技巧-字体图标(iconfont)

最新推荐文章于 2024-07-05 16:58:42 发布

weixiao0111

最新推荐文章于 2024-07-05 16:58:42 发布

阅读量279

点赞数 1

本文链接：https://blog.csdn.net/weixiao0111/article/details/104867502

版权

字体图标

使用场景：主要用于显示网页中通用、常用的一些小图标。

字体图标可以为前端工程师提供一种方便高效的图标使用方式，展示的是图标，本质属于字体。

tips:

如果遇到一些结构和样式比较简单的小图标，就用字体图标。
如果遇到一些结构和样式复杂一点的小图片，就用精灵图。

字体图标的下载

icomoon 字库 http://icomoon.io 推荐指数 ★★★★★

阿里 iconfont 字库 http://www.iconfont.cn/ 推荐指数 ★★★★★

字体图标的引入

下载完毕之后，注意原先的文件不要删，后面会用。

1. 把下载包里面的 fonts 文件夹放入页面根目录下

2. 在 CSS 样式中全局声明字体：简单理解把这些字体文件通过css引入到我们页面中。
一定注意字体文件路径的问题。

3. html 标签内添加小图标。
<span></span>

4.在 CSS 样式中声明span字体

span {
font-family: 'icomoon';
}

代码段

<style>
        @font-face {
            font-family: 'icomoon';
            src: url('fonts/icomoon.eot?uzke7t');
            src: url('fonts/icomoon.eot?uzke7t#iefix') format('embedded-opentype'),
                url('fonts/icomoon.ttf?uzke7t') format('truetype'),
                url('fonts/icomoon.woff?uzke7t') format('woff'),
                url('fonts/icomoon.svg?uzke7t#icomoon') format('svg');
            font-weight: normal;
            font-style: normal;
            font-display: block;
        }

        span {
            font-family: 'icomoon';
        }
    </style>
<body>
    <span></span>
</body>

效果如下