antdesign图标本地化的配置方法

本人的github主页:https://github.com/ichanghe

欢迎star

---

antdesign给开发者提供了很多漂亮的图标，在默认情况下antdesign的图标是从网络请求过来的。

如图：

当你的开发是在保密单位，和外网不通的情况下，要保证正常的开发，就需要把图标本地化。

具体配置方法如下

1、将图标的包下载下来，放到public/iconfont文件夹下面，

 

 2、编辑node_modules/antd/lib/style/index.css

      在352行处，编辑@font-face 

@font-face {
  font-family: 'anticon';
       src: url('../../../../public/iconfont/iconfont.eot');
  /* IE9*/
       src: url('../../../../public/iconfont/iconfont.woff') format('woff'),

  /* chrome、firefox、opera、Safari, Android, iOS 4.2+*/

      url('../../../../public/iconfont/iconfont.ttf') format('truetype'),

/* iOS 4.1- */

       url('../../../../public/iconfont/iconfont.svg#iconfont') format('svg');
}

3、编辑node_modules/antd/dist/antd.css

      在359行处，编辑@font-face 

@font-face {
  font-family: 'anticon';
       src: url('../../../../public/iconfont/iconfont.eot');
  /* IE9*/
       src: url('../../../../public/iconfont/iconfont.woff') format('woff'),

  /* chrome、firefox、opera、Safari, Android, iOS 4.2+*/

      url('../../../../public/iconfont/iconfont.ttf') format('truetype'),

/* iOS 4.1- */

       url('../../../../public/iconfont/iconfont.svg#iconfont') format('svg');
}

4、设置完成，重新启动服务器，查看到图标字体已经变成从本地请求了。