antd将icon图标本地化

最新推荐文章于 2025-06-26 09:04:41 发布

原创最新推荐文章于 2025-06-26 09:04:41 发布 · 7.6k 阅读

1 ·

CC 4.0 BY-SA版权

react 专栏收录该内容

3 篇文章

订阅专栏

本文介绍如何解决使用ReactJS结合Ant Design框架在内网部署时遇到的字体图标加载失败的问题。通过从官方资源库下载图标文件并进行本地配置，确保图标能在内网环境中正确显示。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

问题：使用reactjs+antd 开发的前端迁移到内网后，字体图标丢失

解决：

1、到官方资源库下载图标，地址：http://1x.ant.design/docs/resource/download

2、删除demo*的内容，将剩下的文件新建一个文件夹放入工程的任意一个位置

3、如果要在某一个页面中使用图标，那么在该页面的css文件中添加一下内容:

@font-face {font-family: 'iconfont';
    src: url('../iconfont.eot'); /* IE9*/
    src: url('../iconfont.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
    url('../iconfont.woff') format('woff'), /* chrome、firefox */
    url('../iconfont.ttf') format('truetype'), /* chrome、firefox、opera、Safari, Android, iOS 4.2+*/
    url('../iconfont.svg#iconfont') format('svg'); /* iOS 4.1- */
}

其中，url的位置可以根据实际位置更改。

然后在相同位置添加：

.iconfont{
    font-family:"iconfont" !important;
    font-size:16px;font-style:normal;
    -webkit-font-smoothing: antialiased;
    -webkit-text-stroke-width: 0.2px;
    -moz-osx-font-smoothing: grayscale;}

测试发现图标无padding，可以适当调整padding，如 padding-left: 10px

4、使用时：