字体图标的使用

最新推荐文章于 2022-09-26 15:07:11 发布

戳戳的船长

最新推荐文章于 2022-09-26 15:07:11 发布

阅读量203

点赞数

分类专栏： css 文章标签： 1024程序员节

本文链接：https://blog.csdn.net/qq_45765588/article/details/120934532

版权

css 专栏收录该内容

11 篇文章 0 订阅

订阅专栏

文章目录

一、工具
二、使用步骤
三、代码演示

一、工具

二、使用步骤

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

在这里插入图片描述

2.引入CSS

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

3.字体图标引入

在这里插入图片描述

4.新增字体图标做法

在这里插入图片描述

三、代码演示

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>字体图标的使用</title>
</head>
<style>
    /* 字体声明 */
    @font-face {
    font-family: 'icomoon';
    src:  url('fonts/icomoon.eot?mmf759');
    src:  url('fonts/icomoon.eot?mmf759#iefix') format('embedded-opentype'),
    url('fonts/icomoon.ttf?mmf759') format('truetype'),
    url('fonts/icomoon.woff?mmf759') format('woff'),
    url('fonts/icomoon.svg?mmf759#icomoon') format('svg');
    font-weight: normal;
    font-style: normal;
    font-display: block;
    }

    span{
        font-family: 'icomoon';
        font-style: 100px;
        color:pink;
    }
</style>
<body>
    <span></span>
</body>
</html>