字体图标平面转换渐变色的方法详解

最新推荐文章于 2024-04-11 02:47:45 发布

大佬,类好啊

最新推荐文章于 2024-04-11 02:47:45 发布

阅读量239

点赞数

文章标签： html5 css3 css

本文链接：https://blog.csdn.net/qq_45905130/article/details/127166087

版权

一、字体图标

1、介绍：一种看起来像图片的文字字体。

特点：加载速度快，兼容性高，灵活性强，可以通过css样式来修改属性。

2、使用

（1）登录后，选择官方图标库，选择自己想要的图标，加入购物车。

（2）选择完后，点击购物车，添加至项目，选择本地下载。

（3）在html中 link 引入 iconfont.css

（4）类名调用和 Unicode调用，代码如下：

<!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>
    <!-- 引入 iconfont.css -->
    <link rel="stylesheet" href="./fonts/iconfont.css">
    <style>
        
        .icon-gouwuchekong {
            font-size: 50px;
            color: green;
        }
        .sad {
            font-size: 50px;
            color: green;
        }
    </style>
</head>
<body>
    <!-- 类名调用 -->
    <i class="iconfont icon-gouwuchekong"></i>
    <!-- Unicode调用 -->
    <i class="iconfont sad">&#xe66a;</i>
</body>
</html>