好用的字体图标插件：阿里图标库（iconfont）

最新推荐文章于 2024-05-16 10:00:36 发布

大力酱

最新推荐文章于 2024-05-16 10:00:36 发布

阅读量4.9k

点赞数

分类专栏：自用插件文章标签：字体前端阿里插件库

本文链接：https://blog.csdn.net/p493794782/article/details/72621831

版权

自用插件专栏收录该内容

2 篇文章 0 订阅

订阅专栏

最开始网页中的小图标，多以img形式展示，当有大量的小图标时，会制作雪碧图，来减少请求量；类似这种~

很繁琐，当有hover效果，还要更换图片。字体图标用的就方便多了。

所谓的字体图标，是以font形式展示在页面中，可用color属性控制颜色。我自己用的是阿里图标库。

第一步：搜索想要的图标，比如我输入‘日期’，将合适的图标添加到购物车中。

第二步：将选择好的图标添加至项目中，没有项目可新建

第三步：下载并引用图标代码

第二步点‘确定’按钮后，会自动跳到这个页面中。调用方式分在线调用和本地调用两种，在线调用只要把生成的css链接直接引用到页面即可；本地调用需要下载至本地，该方式下也有三种显示方法，我用的是Font class 形式，然后点击‘下载至本地’

解压后的文件中，选择这5个文件到我们的项目中，在页面中引用iconfont.css文件

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <link rel="stylesheet" href="iconfont/iconfont.css">
</head>
<body>
    <i class="iconfont icon-date"></i>
    <i class="iconfont icon-30"></i>
</body>
</html>

好了，图标显示成功

如果有hover效果，直接修改color，font-size，font-weight等属性，移上去的效果如下

 .icon-date:hover{
            font-size: 40px;
            color: green;
        }

大力酱

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
好用的字体图标插件：阿里图标库（iconfont）

最开始网页中的小图标，多以img形式展示，当有大量的小图标时，会制作雪碧图，来减少请求量；类似这种~很繁琐，当有hover效果，还要更换图片。字体图标用的就方便多了。所谓的字体图标，是以font形式展示在页面中，可用color属性控制颜色。我自己用的是阿里图标库。第一步：搜索想要的图标，比如我输入‘日期’，将合适的图标添加到购物车中。第二步：将选择好
复制链接

扫一扫