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

C++编程来源：网络编辑：小编更新时间：2024-11-24 21:00:04 浏览量：16

最开始网页中的小图标，多以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; }

到此这篇好用的字体图标插件：阿里图标库（iconfont）的文章就介绍到这了,更多相关内容请继续浏览下面的相关推荐文章，希望大家都能在编程的领域有一番成就！

上一篇：发表一篇SCI论文到底有多难？审稿需要多久？

下一篇：十二星座英语名称(Zodiac)

版权声明：
本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如若内容造成侵权、违法违规、事实不符，请将相关资料发送至xkadmin@xkablog.com进行投诉反馈，一经查实，立即处理！

转载请注明出处，原文链接：https://www.xkablog.com/cjjbc/10262.html

相关文章：