HTML 使用字体图标引入图标

最新推荐文章于 2024-07-30 14:53:55 发布

no_head_no_hand

最新推荐文章于 2024-07-30 14:53:55 发布

阅读量3.4k

点赞数 7

分类专栏： HTML 字体图标文章标签： html5 icons

本文链接：https://blog.csdn.net/no_head_no_hand/article/details/112258765

版权

HTML 同时被 2 个专栏收录

5 篇文章 0 订阅

订阅专栏

字体图标

1 篇文章 0 订阅

订阅专栏

HTML 中引入图标
在我们设计开发网页的时候，我们尽量少使用图片图标，因为图片图标刷新时影响速率
图片图标在进行放大时会失帧，会造成模糊

经常用到的是字体图标，字体图标具有和字体一样的属性，可以设置其颜色和大小等属性

如何获取字体图标：
我们常用就是从阿里巴巴矢量图标库中获取免费的图标
步骤：
1、百度搜索 iconfont 或者 https://www.iconfont.cn/
2、注册一个账户
3、注册好后在搜索框中搜索你想要的图标，很多很多，选择一个心仪的
4、点击图标上面的购物车
在这里插入图片描述
5、在右上角购物车中，将选择的图标添加至项目

6、在项目中选择图标编码为symbol，点击下载至本地
7、把下载好的压缩包中的所有文件拷贝至HTML项目中

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

9、点击复制代码，得到图标的名字，在body中引用
在这里插入图片描述

下面是一个例子，可修改属性，达到不同的显示效果

<!DOCTYPE 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>