CSS3_字体图标

最新推荐文章于 2022-10-09 19:25:32 发布

NewBurlaSKing

最新推荐文章于 2022-10-09 19:25:32 发布

阅读量119

点赞数

分类专栏： HTML学习文章标签： html 前端 css3

本文链接：https://blog.csdn.net/qq_55961861/article/details/126262380

版权

HTML学习专栏收录该内容

27 篇文章 0 订阅

订阅专栏

一.背景

我们会经常用到一些图标。但是我们在使用这些图标时，往往会遇到失真的情况，而且图片数量很多的话，页面加载就越慢。所以，我们可以使用字体图标的方式来显示图标，既解决了失真的问题，也解决了图片占用资源的问题

常用字体图标库：阿里字体图标库

二.优点

1 轻量性：加载速度快，减少http请求

2 灵活性：可以利用CSS设置大小颜色等

3 兼容性：网页字体支持所有现代浏览器，包括IE低版本

三.字体图标的使用

1 注册账号并登录

2 选取图标或搜索图标

3 添加购物车

4 下载代码

5 选择 font-class 引用

点开解压后的文件，找到demo_index.html文件，点击
找到你选择图例的上面的font class选项，点击
根据下面文档提示，使用字体图标！

四.实例

<!DOCTYPE html>
<html lang="en">
<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>Document</title>
    <link rel="stylesheet" href="./font/iconfont.css">
    <style>
        .bijiben {
            font-size: 140px;
            color: aquamarine;
        }
        .diannao {
            font-size: 140px;
            color: blueviolet;
        }
        .shubiao {
            font-size: 140px;
            color: red;
        }
    </style>
</head>
<body>
    <span class="iconfont icon-bijiben bijiben"></span>
    <span class="iconfont icon-diannao diannao"></span>
    <span class="iconfont icon-shubiao shubiao"></span>
</body>
</html>