[ant-design/ant-design-pro]本地引入三方 iconfont 不成功

2024-08-29 222 views
9

使用的 iconmoon 导出本地字体文件,使用后界面只显示白框。

2018-06-07 2 34 44 2018-06-07 2 37 22

看上去 css 都正常加载了,但字体文件却没有正常渲染。不知道哪里出了问题。 官方文档的引入三方字体只介绍了 CDN 的方式。

回答

7

脚手架还是组件?

3

@chenshuai2144 你说的名词我不太能准确理解。但我猜你想知道,我这边使用的是 antd pro。

9

不是很懂的你的用法,代码层面呢?

4
  1. 在主样式入口添加了 iconfont(实际是 iconmoon 提供的文件) 样式文件

    2018-06-08 9 45 14
  2. iconfont 文件中有对字体的引入 class 的设置,字体的 class

    2018-06-08 9 45 34
  3. 在使用的地方,class 已经正常匹配上了

    2018-06-07 2 37 22
  4. 但仍然显示白框

    2018-06-08 9 45 48
8

字体加载回来了?

6

最好给重现的 repo,这样提问基本上没法解决。甚至都不知道和 pro 有没有关系。

5
我以为我描述的够清楚了。不过我还是读了一下提问的智慧。为了进一步找到问题的原因,我又做出了以下操作:

@chenshuai2144 @afc163 为了排除无关的干扰,我从新 clone 了一个 ant-design-pro 项目,从 iconfont.cn 创建了一个新项目。 并按照 antd-pro 的文档「文档->进阶->业务图标」尝试了一下CDN的方式引入,可以正常显示图标。但下载后使用本地文件仍然不显示。

  1. 下载 iconfont 并放入 src/assets 中

    2018-06-08 5 20 10
  2. 在 index.less 中引入 iconfont.css 文件

    2018-06-08 5 02 11
  3. 在 Analysis.js 文件中使用 iconfont,分别用 unicode 和 font-class 方式加入图标

    2018-06-08 5 03 18
  4. 不显示

    2018-06-08 5 04 54

fork 了一个项目 并提交了一个 commit https://github.com/uni-zheng/ant-design-pro.git

6

@pkaq 谢谢,看了,但我们项目没法使用 CDN

9

@chenshuai2144 @afc163 你好 目前有什么建议么