网站开发中如何使用iconMoon字体图标？

由于网站上直接调用图片格式的图标使用上占用的体积比较大且显示不够清晰，下面可以通过使用字体图标来解决这个问题。icomoon是一个很全的国外图标字体库，可以应用在网站和APP上，也可以生成图片，制作在PDF上。
具体使用步骤如下：
1.打开官网https://icomoon.io/
2.点击右上角的icoMoon APP，选择图标

3.选择好图标，图标选择后可进行删除，编辑等操作，然后点击右下角的Genetate Font，Download下载图标
4.这时候会获得一个icomoon压缩文件，其中下载的demo.html文件可在浏览器中直接打开对照使用，解压后的文件如下：

5.配置使用图标，正式使用的文件有fonts和style.css，其中css需要注意路径：

@font-face {  font-family: 'icomoon';  src:  url('fonts/icomoon.eot?ldkkeh');  src:  url('fonts/icomoon.eot?ldkkeh#iefix') format('embedded-opentype'),    url('fonts/icomoon.ttf?ldkkeh') format('truetype'),    url('fonts/icomoon.woff?ldkkeh') format('woff'),    url('fonts/icomoon.svg?ldkkeh#icomoon') format('svg');  font-weight: normal;  font-style: normal;  font-display: block;}

...
html 使用例如:

<span class="icon-whatsapp"></span>

注意事项：不用的图标建议不要选择，如果全部选择会增加icomoon.woff等文件的体积大小，导致网站上加载比较慢，所以，为了提高网站的性能，建议只选择需要的图标；注意iconMoon字体图标免费版选择图标功能存到浏览器缓存中，如果浏览器缓存清理或丢失则数据丢失，需要长期保存选择的图标需要购买付费版；如果图标不够用，可以在网页上部search图标，或者在下面点击 Add Icons From Library 添加新的图标库进行使用。

优网科技，优秀企业首选的互联网供应服务商

优网科技秉承"专业团队、品质服务" 的经营理念，诚信务实的服务了近万家客户，成为众多世界500强、集团和上市公司的长期合作伙伴！

优网科技成立于2001年，擅长网站建设、网站与各类业务系统深度整合，致力于提供完善的企业互联网解决方案。优网科技提供PC端网站建设（品牌展示型、官方门户型、营销商务型、电子商务型、信息门户型、DIY体验、720全景展厅及3D虚拟仿真）、移动端应用（手机站、APP开发）、微信定制开发（微信官网、微信商城、企业微信）、微信小程序定制开发等一系列互联网应用服务。

我要投稿

优网知识库

探索行业前沿，共享知识宝库

相关资讯

高端定制互联网应用服务商

热点资讯

网站评价系统/模块开发

外贸网站如何发送客户开发信？

微信小程序备案流程与说明

广州外贸网站制作需要提供什么资料？

在广州建个网站多少钱？

FTP远程连接Windows服务器中网站防火墙的安全设置

大家都在看

14 个很有创意的水平布局网站作品案例

Flyon UI：最新款免费且开源的 Tailwind CSS 组件库

强力推荐！10大高质量交互设计网站，交互案例/灵感/工具，实用性拉满！

充电桩收费系统开发：桩企、充电桩运营商如何建立自己的收费平台？

2025年10个平面设计发展趋势预测报告！

用几分钟的时间了解下IPV6地址的一些常识！

项目|在线课程培训系统，一站式解决企业学习培训解决

企微云

客户池

微信小名片

网站建设

优网科技

小名片

53AI

智慧教育解决方案

智慧答题解决方案

智慧建材解决方案

智慧家装解决方案

智慧家居解决方案

智慧校园解决方案

企业微信解决方案

教育机构解决方案

家校互动解决方案

微信客服解决方案

智能收款解决方案

家装行业解决方案

建材行业解决方案

家居行业解决方案

家电行业解决方案

品牌网站设计

网页设计

APP开发

微信公众号定制开发

小程序开发

制作网站

企业建站

微网站

微官站

手机网站建设

我要投稿