首頁(yè) > 博客列表 > 插入字體圖標(biāo)

博主信息

博文 38

粉絲 0

評(píng)論 0

訪(fǎng)問(wèn)量 30795

專(zhuān)題推薦

更多>

相關(guān)推薦

最新下載

更多>

網(wǎng)站特效

網(wǎng)站源碼

網(wǎng)站素材

前端模板

插入字體圖標(biāo)

一個(gè)好人

原創(chuàng)

1117人瀏覽過(guò)

<!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;![三個(gè)字體圖標(biāo)](https://img.php.cn/upload/image/190/275/596/1679050213821360.png "三個(gè)字體圖標(biāo)")
    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;
    }
}