css - 离线时使用 Ant Design 图标

标签 css reactjs antd offline-mode

我正在开发一个使用 ant design 的 UI 的 reactJS 应用程序。最近,我们将此应用程序发布到生产环境中,其中的计算机非常锁定。此应用程序是一个 Intranet 应用程序,这些计算机无法访问 Internet。因此,正因为如此,模态框上的 Ant 设计图标显示为空框。我做了一些挖掘,发现图标使用的是 CSS 类。

例如,这是错误模态上红色错误“X”的 CSS 类:

.anticon-cross-circle:before
{
   content:"\E62E"
}

我对 CSS content 属性不太熟悉所以我去了 www.w3schools.com仔细阅读并在他们的 Try It 上测试了这个特定的内容值这个属性的页面,我得到了我在生产环境中得到的空框。

有谁知道需要做什么才能将这些图标导入到我的元素中,以便它们可以离线使用?

谢谢

最佳答案

我认为正在发生的事情是 Ant Design 正在使用指向相应字体文件的 URL 来定义 CSS 字体定义。由于计算机处于离线状态,因此无法找到这些定义。

在文档中,我看到他们还提供了 SVG 图标,应该可以完全离线使用。我认为这值得一试。实现这个的步骤可以在这里找到,它应该从 3.9.0 版开始可用:https://ant.design/components/icon/#SVG-icons

关于css - 离线时使用 Ant Design 图标,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/59394428/

相关文章:

javascript - D3JS - 在 setinterval 刷新时更改颜色(也称为 ragging)

javascript - 如何为表单上的多个输入字段创建数据列表? HTML5

html - 图像上的文本 block 和图像

android - React Native DrawerLayoutAndroid 引用不起作用

javascript - 如何使用Vue的Ant Design Pro调整面包屑的正确级别?

jquery 动态背景图片 url 不起作用

reactjs - React : Why on . 映射数组不显示项目列表?

javascript - 如何在突变 onSuccess 中运行 useQuery 查询并首先等待结果?

reactjs - 意外字符 '@' (1 :0) on Gatsby after installing package

javascript - 无法读取handleupload处未定义的属性 'setState'