如何使用图标库iconfont

最新推荐文章于 2024-12-25 15:49:19 发布

well well to will

最新推荐文章于 2024-12-25 15:49:19 发布

阅读量968

点赞数

版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。

本文链接：https://blog.youkuaiyun.com/weixin_46486125/article/details/108607277

版权

1可以百度输入iconfont搜索,或者点击此链接点击官网进入到页面：

在这里插入图片描述

在这里比如找一个类似用户的图标，输入用户回车查找，

在这里插入图片描述

页面中就有很多相关用户的图标出现，如下：

在这里插入图片描述

我们可以随机挑选两张图标，用鼠标划过图标，会出现如下

在这里插入图片描述

接着类似于我们淘宝买东西，可以点击第一个购物车图标，这样子我们选中的图标就存放在购物车中了，可以加购多个图片，右下角会有个加购显示

在这里插入图片描述

点击下方购物车

在这里插入图片描述

我们可以将其添加到项目中，方便日后我们做项目管理这里我添加到了我命名为first的项目中

在这里插入图片描述

点击Font Class和查看在线链接，就会有个链接出来，复制粘贴在任何一个浏览器中

在这里插入图片描述

在这里插入图片描述

这就是我们需要引入的css代码，使用ctrl+a全复制，在vs中新建一个命名为icon.css的文件

在这里插入图片描述

然后回到我们刚才加购图标的页面，用鼠标划过一个图标，复制该图标的名字

在这里插入图片描述

最后我们新建一个以html结尾的文件，使用link标签将icon.css引入，使用使用引入，我这里新建一个test.html的文件，引入图标名为icon-yonghu1

在这里插入图片描述

运行结果如下

在这里插入图片描述

就这样就可以引用成功我们想要的图标了，你会了吗？

评论

被折叠的条评论为什么被折叠?

到【灌水乐园】发言

查看更多评论

添加红包

成就一亿技术人!

hope_wisdom

发出的红包

实付元

使用余额支付

点击重新获取

扫码支付

钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。