首页 > 博客列表 > 插入字体图标

博主信息

博文 38

粉丝 0

访问量 31642

专题推荐

更多>

最新下载

更多>

网站特效

网站源码

网站素材

前端模板

插入字体图标

一个好人

原创

1134人浏览过

<!DOCTYPE html>
<html lang="zh-CN">
<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>case</title>
    <link rel="stylesheet" href="icon.css">
</head>
<body>
    <div class="box parent">
        <div class="box child">
            <span class="iconfont icon-elment index"></span>
            <span class="iconfont icon-quanbudingdan order"></span>
            <span class="iconfont icon-31wode my"></span>
        </div>
    </div>
</body>
</html>
``````css
@import url('https://at.alicdn.com/t/c/font_3958347_byfo5e0zz4n.css');
.box{
    border: 1px solid blue;![三个字体图标](https://img.php.cn/upload/image/190/275/596/1679050213821360.png "三个字体图标")
    background-color: lightgrey;
}
.box.parent{
    width: 420px;
}
.box.child{
    width: 375px;
    height: 800rem;
    margin-left: auto;
    margin-right: auto;
    margin-top: 20px;
    border: none;
}
.index{
    opacity: 0.6;
    font-size: 2rem;
    color: #707070;
    margin-top: 20px;
    margin-left: 1rem;
}
.order{
    opacity: 0.6;
    font-size: 2rem;
    color: #707070;
    margin-top: 20px;
    margin-left: 0.7em;
    margin-right: 0.7em;
}
.my{
    opacity: 0.6;
    font-size: 2rem;
    color: #707070;
    margin-top: 20px;
    /* margin-left: 16px; */
    margin-right: 16px;
}
.iconfont:hover{
    opacity: 1;
    font-size: 2.2rem;
    color: #00aaff;
    cursor: pointer;
    transition: 0.3s;
}
@media (max-width:500px) {
    html{
        font-size: 1.8rem;
    }
}
@media (min-width:500px) and (max-width:800px){
    html{
        font-size: 2rem;
    }
}
@media (min-width:800px) {
    html{
        font-size: 2.5rem;
    }
}