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

程序员文章站 2024-02-16 12:30:28

...

字体图标

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

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

tips:

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

字体图标的下载

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

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

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

字体图标的引入

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

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

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

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

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

span {
font-family: 'icomoon';
}

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

代码段

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

效果如下

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