css伪类选择器-字体图标

最新推荐文章于 2023-02-10 19:54:18 发布

lxl211

最新推荐文章于 2023-02-10 19:54:18 发布

阅读量329

点赞数

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

本文链接：https://blog.csdn.net/lxllxl211/article/details/127270973

版权

css 专栏收录该内容

45 篇文章 0 订阅

订阅专栏

先下载一个字体图标
在这里插入图片描述
然后解压：

把fonts文件夹复制到同一级文件夹：html文件和字体文件一样的位置

然后双击打开style.css文件夹

把这第一段复制

然后粘贴到html文件的style中，即：

然后就是随便建个div

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

        div {
            /* 父相 */
            position: relative;
            width: 200px;
            height: 35px;
            border: 1px solid red;
        }

        div::after {
            /* 子绝 */
            position: absolute;
            top: 10px;
            right: 10px;
            font-size: 18px;
            color: red;
            /* 伪类选择器的font-family要和 @font-face的一样vvv */
            font-family: 'icomoon';
            content: '';
        }
    </style>
</head>

<body>
    <div></div>
</body>