走过路过不要错过

最新推荐文章于 2025-12-18 23:38:54 发布

原创最新推荐文章于 2025-12-18 23:38:54 发布 · 255 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#html #css3 #前端

字体图标:表象是图标本质是字体.国内网站:iconfont-阿里巴巴矢量图标库

字体图标使用方式:

1 类名使用先引用字体图标的样式 iconfont.css 2 在文档中添加iconfont类跟对应图标的类名即可

<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>字体图标案例</title>
    <link rel="stylesheet" href="./fonts/iconfont.css">
    <style>
        .icon-gouwuchekong {
            color: #fa480a;
        }

        .car {
            width: 400px;
            height: 100px;
            margin: 20px auto;
        }

        .car i {
            font-size: 40px;
        }

        span {
            font-size: 40px;
        }
    </style>
</head>

<body>
    <div class="car">
        <i class="iconfont  icon-gouwuchekong"></i>
        <span>购物车</span>
        <i class="iconfont icon-arrow-down"></i>
    </div>
</body>

2 Unicode使用方式:第一步跟上方相同,先引入字体图标样式.第二步略微不同直接在标签中写入相依的Unicode码即可显示

3 可使用伪元素添加字体图标在已经存在的iconfont.css中找到对应的content 的编码使用编码插入字体图标

    <style>
        /* 使用伪元素加入字体 */
        .car::after {
            content: '\e600';
            font-size: 100px;
        }
    </style>
</head>

<body>
    <i class="iconfont car"></i>
</body>

当然上述都是使用方式都是自己将所需字体图标下载之后本地使用,也可以使用线上进行字体图标的使用