问题描述
我正在开发一个使用 ant 设计 UI 的 reactJS 应用程序.最近，我们将此应用程序发布到生产环境中，但计算机已被完全锁定.此应用程序是一个 Intranet 应用程序，这些计算机无法访问 Internet.因此，因此，模态上的蚂蚁设计图标显示为空框.我做了一些挖掘，发现图标使用了 CSS 类.
I am working on a reactJS application that uses ant design for the UI. Recently we released this application to production where the computers are pretty locked down. This application is an intranet application and these computers have no internet access. So, because of that, the ant design icons on the modals were showing up as empty boxes. I did some digging and saw that the icons are using CSS classes.
例如，这是错误模态上红色错误X"的CSS类:
For example, this is the CSS class for the red error "X" on the error modal:
.anticon-cross-circle:before
{
content:"\E62E"
}
我对 CSS 内容属性不太熟悉，所以我去了 www.w3schools.com 并仔细阅读并在他们的 尝试此属性页面，我得到了我在生产环境中得到的空框.
I'm not too familiar with the CSS content attribute so I went to www.w3schools.com and read up on it a bit and tested this particular content value on their Try It page for this attribute and I got the empty box that I got in my production environment.
有谁知道需要做什么才能将这些图标导入到我的项目中，以便它们可以离线使用?
Does anyone know what needs to be done to import these icons into my project so that they can be used offline?
谢谢
推荐答案
我认为正在发生的是 Ant Design 正在定义 CSS 字体定义，并带有指向相应字体文件的 URL.由于计算机处于离线状态，因此无法找到这些定义.
What I think is happening is that Ant Design is defining the CSS font definition with a URL to the corresponding font-file. Since the computers are offline, it cannot find those definitions.
在文档中，我看到他们还提供了 SVG 图标，它应该可以完全脱机工作.我认为这值得一试.可以在此处找到实现这一点的步骤，它应该从 3.9.0 版开始提供:https://ant.design/components/icon/#SVG-icons
In the documentation I see that they also provide SVG Icons, which should work completely offline. I think this is worth a try. The steps to implement this can be found here and it should be available from version 3.9.0: https://ant.design/components/icon/#SVG-icons
这篇关于离线时使用 Ant 设计图标的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！