html页面中使用svg字体图标的完整流程

最新推荐文章于 2024-04-19 09:41:08 发布

最初都是小白

最新推荐文章于 2024-04-19 09:41:08 发布

阅读量2.2k

点赞数 2

分类专栏： Html 文章标签： html svg iconfont

本文链接：https://blog.csdn.net/Originally_M/article/details/106658967

版权

Html 专栏收录该内容

3 篇文章 1 订阅

订阅专栏

上周整理了一篇小程序中如何使用字体图标，昨天朋友问我普通页面如何使用svg并改变颜色，今天就整理一下，都很简单

首先依旧是打开字体图标库 https://icomoon.io ：

在这里插入图片描述

下载完成后解压：

在这里插入图片描述

代码如下：

注意：字体图标就像文字一样，用font-size设置大小，color设置颜色，其他样式均可自定义。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>html中使用svg字体图标</title>
    <!-- 引用icon样式文件 -->
    <link rel="stylesheet" href="./css/style.css">
    <style>
        /* 字体图标就像文字一样，用font-size设置大小，color设置颜色，其他样式均可自定义 */
        .icon-site {
            font-size: 40px;
            color: red;
        }
    </style>
</head>
<body>
   <div>
    <span class="icon-site"></span>
   </div>
</body>
</html>

效果：

在这里插入图片描述

网页中使用svg可以优化页面，减小项目体积，并且一些logo为了保证它在各种屏幕分辨率都清晰，也会选用svg制作，样式方面，一般操作文字的样式，例如一些渐变的样式svg的图标也可以做到哦。

最初都是小白

关注

2
点赞
踩
4

收藏

觉得还不错? 一键收藏
0
评论
html页面中使用svg字体图标的完整流程

上周整理了一篇小程序中如何使用字体图标，昨天朋友问我普通页面如何使用svg并改变颜色，今天就整理一下首先依旧是打开字体图标库 https://icomoon.io ：下载完成后解压：代码如下：注意：字体图标就像文字一样，用font-size设置大小，color设置颜色，其他样式均可自定义。<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> &lt
复制链接

扫一扫