Ant Design Pro 通过Unicode引入阿里巴巴图标库的坑

在根据Ant Design Pro文档按照Unicode引入业务图标时,根据文档发现一直出现问号无效图标。最终代码如下:

@font-face {
  font-family: 'iconfont';  /* project id 1189004 */
  src: url('http://at.alicdn.com/t/font_1189004_tyiu2qkh7sc.eot');
  src: url('http://at.alicdn.com/t/font_1189004_tyiu2qkh7sc.eot?#iefix') format('embedded-opentype'),
  url('http://at.alicdn.com/t/font_1189004_tyiu2qkh7sc.woff2') format('woff2'),
  url('http://at.alicdn.com/t/font_1189004_tyiu2qkh7sc.woff') format('woff'),
  url('http://at.alicdn.com/t/font_1189004_tyiu2qkh7sc.ttf') format('truetype'),
  url('http://at.alicdn.com/t/font_1189004_tyiu2qkh7sc.svg#iconfont') format('svg');
}

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

url里面一定需要带上http,ant design pro 上的文档只有斜杆//加载的本地。而且样式也会影响到图标的展示,根据需要调整样式。

©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容