html小图标-HTML使用font-icons来引入图标

bendan520 2023年8月23日 html 0

引入 HTML 中的图标

我们在设计开发网页时，尽量少用图片图标，因为图片图标刷新速度

图像图标放大时丢帧，导致模糊

经常会用到字体图标，字体图标与字体具有相同的属性html小图标，可以设置其颜色、大小等属性

如何获取字体图标：

我们常见的用途是从阿里巴巴矢量图标库获取免费图标

步：

1.百度搜索iconfont或

2. 注册账号

3.注册后，在搜索框中搜索你想要的图标，有很多很多，选一个喜欢的

4.点击图标内的购物车

5.在右上角的购物车中，将选中的图标添加到商品中

6.选择项目中的图标代码作为符号，点击下载到本地

7.将下载的压缩包中的所有文件复制到HTML项目中

图标小咖秀app下载_html的icon图标_html小图标

8.在HTML文档中引用iconfont.css，注意路径

9.点击复制代码获取图标名称并在body中引用

下面是一个反例html小图标，可以改变属性来实现不同的显示效果


<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>MyIcon</title>
    <link rel="stylesheet" href="iconfont.css" />
    <style>
        .sousuo {
            width: 1000px;
            height: 1000px;
            background-color: rgb(144, 135, 222);
            text-align: center;
            line-height: 1000px;
        }
        
        .myicon {
            font-size: 300px;
            color: crimson;
        }
    </style>
</head>
<body>
    <div class="sousuo">
        <span class="iconfont icon-sousuo myicon">
        </span>
    </div>
</body>
</html>