css3-iconfont伪类选择器的使用

最新推荐文章于 2024-07-05 16:58:42 发布

Sivan56

最新推荐文章于 2024-07-05 16:58:42 发布

阅读量1.8k

点赞数

分类专栏：美化文章标签： css html5

本文链接：https://blog.csdn.net/Sivan56/article/details/108029550

版权

美化专栏收录该内容

2 篇文章 1 订阅

订阅专栏

css3-iconfont伪类选择器的使用

css的iconfont使用有三种方式，第一种方式是Unicode，第二种方式是fontclass，第三种方式是Symbol。在介绍iconfont伪类选择器的使用之前，我们来了解下iconfont的三种css表达方式。关于这三种表示方法在iconfont中都有简介。链接在这iconfont帮助文档

iconfont伪类选择器的使用

斜体样式笔者喜斜体样式欢直接引用例子，所以花里胡哨的表达就算了。

从iconfont上下载字体图标素材在这里插入图片描述
关于素材的相关信息和使用方法可以在demo_index.html和iconfont.css中查看，笔者下载了如图所示几个图标素材作为练习素材,
现在，我们可以训练css3的伪类选择器，我们使用伪类选择器达到效果如图所示制作如此一个效果，我们可以将其分为两部分，一部分是一个div大盒子，然后采用定位position将这个电脑字体图标定位到右边

html代码如下

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<style>
    @font-face {
        font-family: "iconfont";
        src: url('iconfont.eot?t=1597204588072');
        /* IE9 */
        src: url('iconfont.eot?t=1597204588072#iefix') format('embedded-opentype'),
            /* IE6-IE8 */
            url('data:application/x-font-woff2;charset=utf-8;base64,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') format('woff2'),
            url('iconfont.woff?t=1597204588072') format('woff'),
            url('iconfont.ttf?t=1597204588072') format('truetype'),
            /* chrome, firefox, opera, Safari, Android, iOS 4.2+ */
            url('iconfont.svg?t=1597204588072#iconfont') format('svg');
        /* iOS 4.1- */
    }

    .iconfont {
        font-family: "iconfont" !important;
        font-size: 12px;
        font-style: normal;
        -webkit-font-smoothing: antialiased;
        -moz-osx-font-smoothing: grayscale;
    }

    .icon-xianxingbenzivg:before {
        content: "\e679";
    }

    .icon-xianxingchizi:before {
        content: "\e67a";
    }

    .icon-xianxingboshimao:before {
        content: "\e67b";
    }

    .icon-xianxingdayinji:before {
        content: "\e67c";
    }

    .icon-xianxingdiannao:before {
        content: "\e67d";
    }


    div {
        position: relative;
        width: 180px;
        height: 30px;
        border: 1px solid grey;
    }

    div::after {
        position: absolute;
        line-height: 30px;
        height: 30px;
        right: 0;
        font-size: 30px;
        font-family: 'iconfont';
        content: '\e67d';
    }
</style>

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

</html>