antdesign图标本地化的配置方法

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、设置完成,重新启动服务器,查看到图标字体已经变成从本地请求了。

猜你喜欢

转载自blog.csdn.net/ajrdbrjckt/article/details/81299039
今日推荐