icoMoon字体图标的使用

最新推荐文章于 2024-01-27 14:32:34 发布

真的想不出名儿

最新推荐文章于 2024-01-27 14:32:34 发布

阅读量208

点赞数

分类专栏： css 文章标签： css 前端

本文链接：https://blog.csdn.net/ioncannontic/article/details/131002665

版权

css 专栏收录该内容

27 篇文章 0 订阅

订阅专栏

文章介绍了如何从IcoMoon网站选择图标并生成字体文件，然后将这些字体文件集成到项目中。通过在HTML中引入style.css并设置字体声明，可以将图标显示在页面上。此外，还展示了如何在HTML的span元素中使用图标字体。

摘要由CSDN通过智能技术生成

步骤：

进入Icon Font & SVG Icon Sets ❍ IcoMoon
选择图标并生成字体
下载文件
将下载文件中的 fonts 文件夹复制到项目根目录下
打开style.css文件 字体声明，将 style.css 文件中的开头的字体声明代码赋值到 html 中

<!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>Document</title>
    <style>
        @font-face {
            font-family: 'icomoon';
            src: url('fonts/icomoon.eot?cggue');
            src: url('fonts/icomoon.eot?cggue#iefix') format('embedded-opentype'),
                url('fonts/icomoon.ttf?cggue') format('truetype'),
                url('fonts/icomoon.woff?cggue') format('woff'),
                url('fonts/icomoon.svg?cggue#icomoon') format('svg');
            font-weight: normal;
            font-style: normal;
            font-display: block;
        }
    </style>
</head>

<body>

</body>

</html>

6. 打开 demo.html，复制页面中的方框图标到 html 代码中即可。

<!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>Document</title>
    <style>
        @font-face {
            font-family: 'icomoon';
            src: url('fonts/icomoon.eot?cggue');
            src: url('fonts/icomoon.eot?cggue#iefix') format('embedded-opentype'),
                url('fonts/icomoon.ttf?cggue') format('truetype'),
                url('fonts/icomoon.woff?cggue') format('woff'),
                url('fonts/icomoon.svg?cggue#icomoon') format('svg');
            font-weight: normal;
            font-style: normal;
            font-display: block;
        }
    </style>
</head>

<body>
    <span></span>
    <span>\e916</span>
</body>

</html>

7. 给 span 声明字体或者在伪元素选择器的content属性中添加字体代码：

<!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>Document</title>
    <style>
        @font-face {
            font-family: 'icomoon';
            src: url('fonts/icomoon.eot?cggue');
            src: url('fonts/icomoon.eot?cggue#iefix') format('embedded-opentype'),
                url('fonts/icomoon.ttf?cggue') format('truetype'),
                url('fonts/icomoon.woff?cggue') format('woff'),
                url('fonts/icomoon.svg?cggue#icomoon') format('svg');
            font-weight: normal;
            font-style: normal;
            font-display: block;
        }

        span {
            font-family: 'icomoon';
            color: pink;
        }

        span::after {
            content: '\e916';
        }
    </style>
</head>

<body>
    <span></span>
</body>

</html>

效果如下