CSS中添加iconfont素材并导入

最新推荐文章于 2024-07-05 16:58:42 发布

青衣211

最新推荐文章于 2024-07-05 16:58:42 发布

阅读量305

点赞数

文章标签： css 前端 javascript

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

本文链接：https://blog.csdn.net/weixin_63110715/article/details/131233690

版权

本文介绍了如何从iconfont.cn网站下载并使用矢量图标。首先注册并搜索所需图标，将其添加到购物车并下载。接着解压文件，创建font文件夹并导入相关样式表及字体文件。然后修改iconfont.css中的路径，并在网页代码中使用图标编码显示图标。

摘要由CSDN通过智能技术生成

CSS中添加iconfont素材并导入

1.iconfont：https://www.iconfont.cn/
打开iconfont-阿里巴巴矢量图标库（没有用户先注册）自我搜索素材，找到素材添加到购物车上
在这里插入图片描述

在这里插入图片描述
点击购物车在这里插入图片描述
2.打开购物车，选择添加项目

3.点击添加并且输入名称

4.点击下载到本地

5. 会下载为一个压缩文件，进行解压缩打开以后提取文件

在这里插入图片描述
（不定时，按照每个下载图标下的文件，视情况而定）

6. 建立font文件夹，将iconfont.css和 iconfont.ttf,iconfont.woff,iconfont.woff2分别导入css和font文件夹中。

7. 修改iconfont.css文件的路径，根据自己情况写

8.网页代码如下，为图片自己的编码号
在这里插入图片描述

9.运行结果如下

–end

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
1
评论
CSS中添加iconfont素材并导入

6. 建立font文件夹，将iconfont.css和 iconfont.ttf,iconfont.woff,iconfont.woff2分别导入css和font文件夹中。打开iconfont-阿里巴巴矢量图标库（没有用户先注册）自我搜索素材，找到素材添加到购物车上。7. 修改iconfont.css文件的路径，根据自己情况写。5. 会下载为一个压缩文件，进行解压缩打开以后提取文件。（不定时，按照每个下载图标下的文件，视情况而定）8.网页代码如下，为图片自己的编码号。2.打开购物车，选择添加项目。
复制链接

扫一扫

青衣211 CSDN认证博客专家 CSDN认证企业博客

码龄3年

4: 原创

203万+: 周排名

228万+: 总排名

611: 访问

: 等级

40: 积分

0: 粉丝

0: 获赞

4: 评论

0: 收藏

私信

关注

热门文章

最新评论

**Bootstrap框架用法**
CSDN-Ada助手: 恭喜你写下了第四篇博客！标题“Bootstrap框架用法”听起来非常有趣。你对这个主题的深入探讨一定会帮助读者更好地理解和应用Bootstrap框架。接下来，我希望你可以考虑写一篇关于Bootstrap框架的实际应用案例，让读者通过具体的示例更好地理解和运用这个框架。期待你的下一篇博客！如何快速涨粉，请看该博主的分享：https://hope-wisdom.blog.csdn.net/article/details/130544967?utm_source=csdn_ai_ada_blog_reply5
弹性容器属性
CSDN-Ada助手: 恭喜您写下了第一篇博客！弹性容器属性是一个很棒的主题，您的讲解也很清晰易懂。作为下一步的创作建议，我认为您可以深入研究一些实际应用场景，探索如何在实际项目中运用弹性容器属性。期待看到您更多优质的文章！推荐【每天值得看】：https://bbs.csdn.net/forums/csdnnews?typeId=21804&utm_source=csdn_ai_ada_blog_reply1 如果您持续创作，完成第三篇博客，并且质量分达到 80 分以上，在评论区就有机会获得红包奖励哦！
CSS中添加iconfont素材并导入
CSDN-Ada助手: 非常感谢您分享这篇关于CSS中添加iconfont素材的博客！您的经验对于那些刚开始学习CSS的人们来说一定非常有用。除了您分享的内容，我想提醒大家在添加iconfont素材时，要注意选择合适的图标，不要过度使用，以免影响网页的加载速度。另外，您可以尝试使用CSS Sprites技术将多个图标合并为一个文件，进一步优化网页的性能。期待您的下一篇博客！如何写出更高质量的博客，请看该博主的分享：https://blog.csdn.net/lmy_520/article/details/128686434?utm_source=csdn_ai_ada_blog_reply2 如果您持续创作，完成第三篇博客，并且质量分达到 80 分以上，在评论区就有机会获得红包奖励哦！
CSS中添加iconfont素材并导入
CSDN-Ada助手: 非常感谢用户分享这篇关于CSS中添加iconfont素材并导入的文章，这对于我们学习CSS来说非常有帮助。恭喜您持续创作，为大家提供更多优质的内容。在下一步的创作中，建议可以结合实际开发中的场景，分享更多实用的技巧和经验，让读者可以更好地应用到自己的项目中。 CSDN 正在通过评论红包奖励优秀博客，请看红包流：https://bbs.csdn.net/?type=4&header=0&utm_source=csdn_ai_ada_blog_reply3，我们会奖励持续创作和学习的博主，请看：https://bbs.csdn.net/forums/csdnnews?typeId=116148&utm_source=csdn_ai_ada_blog_reply3

最新文章

目录

评论 1

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

到【灌水乐园】发言

查看更多评论

添加红包

成就一亿技术人!

hope_wisdom

发出的红包

实付元

使用余额支付

点击重新获取

扫码支付

钱包余额 0

抵扣说明：

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