字体图标结合伪元素的使用

最新推荐文章于 2022-05-28 11:15:04 发布

王少海

最新推荐文章于 2022-05-28 11:15:04 发布

阅读量415

点赞数

本文链接：https://blog.csdn.net/qq_36323561/article/details/105087216

版权

随手专栏收录该内容

6 篇文章 0 订阅

订阅专栏

字体图标结合伪元素的使用

代码：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <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?sz2z9h');
            src: url('fonts/icomoon.eot?sz2z9h#iefix') format('embedded-opentype'),
                url('fonts/icomoon.ttf?sz2z9h') format('truetype'),
                url('fonts/icomoon.woff?sz2z9h') format('woff'),
                url('fonts/icomoon.svg?sz2z9h#icomoon') format('svg');
            font-weight: normal;
            font-style: normal;
            font-display: block;
        }

        .search {
            width: 250px;
            height: 35px;
            border: 1px solid #ccc;
        }

        .search::after {
            font-family: 'icomoon';
            content: '\e986';
        }
    </style>
</head>

<body>
    <div class="search">搜索</div>
</body>

</html>