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

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


代码:

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

效果图:

最基本的显示,未作任何调整

在这里插入图片描述

发布了11 篇原创文章 · 获赞 0 · 访问量 484
展开阅读全文

没有更多推荐了,返回首页

©️2019 CSDN 皮肤主题: 游动-白 设计师: 上身试试

分享到微信朋友圈

×

扫一扫,手机浏览