ant design 的iconfont 字体是调用的阿里的CDN地址,对于一些内网的应用,或者被屏蔽的站点,下载的字体地址就不生效了。官网提供了一种解决方案,替换less变量 @icon-url, 详见: https://github.com/Joannamo/a...css
除了这种方案,现提供一种修改经过webpack的配置的方式来修改。webpack
下载地址:https://ant.design/docs/spec/...git
能够把下载的文件放入到public目录中。github
{ test: /\.less$/, use: [ require.resolve('style-loader'), require.resolve('css-loader'), { loader: require.resolve('postcss-loader'), options: { ident: 'postcss', // https://webpack.js.org/guides/migrating/#complex-options plugins: () => [ require('postcss-flexbugs-fixes'), autoprefixer({ browsers: [ '>1%', 'last 4 versions', 'Firefox ESR', 'not ie < 9', // React doesn't support IE8 anyway ], flexbox: 'no-2009', }), ], }, }, { loader: require.resolve('less-loader'), options: { modifyVars: { '@font-size-base': '13px', '@text-color': 'fade(#000, 75%)', "@icon-url": '"/iconfont/iconfont"' } }, }, ], }
这种方式跟官方的提供的方式类似,只是这里是采用webpack配置的方式,我的认为webpack配置的方式更灵活。web
除了上面的方式,更粗暴的方式是直接去ant design里面修改文件中的 @icon-url的地址。antd