如何在create-react-app中使用icomoon创建的字体图标? [英] How to use font-icons created by icomoon in create-react-app?

问题描述

我使用icomoon将svg转换为字体图标，并将生成的字体文件导入了create-react-app的index.scss中，但有时这些图标没有加载到应用程序中，看起来像这破损的图标图像我也尝试过使用预加载，但没有用.

I converted svg to font-icons using icomoon and imported the generated font files in index.scss of create-react-app but sometime these icons don't load up in the application and look like this Broken Icons Image I tried using preload as well but didn't work.

如何解决此问题?

我们正在将应用程序部署在AWS上.

We are deploying the app on AWS.

谢谢.

我尝试在各个地方找到解决方案，但没有找到最佳解决方案

I tried finding a solution over various places but didn't find an optimal solution

@font-face {
  font-family: "appicon";
  src: url("./resources/fonts/appicon.woff") format("woff"), url("./resources/fonts/appicon.ttf") format("truetype"),
    url("./resources/fonts/appicon.eot") format("embedded-opentype");
  font-weight: normal;
  font-style: normal;
  font-display: block;
}

推荐答案

我已解决此问题.谢谢大家的离线支持.

I got a fix for this. thank you everyone for your offline support.

解决方法是我们需要确保不缓存字体文件，并且在使用前先对scss文件中使用的图标进行解码.由于在生产环境中运行时解码不会将content属性下的这些变量转换为有效值

The fix is we need to make sure that font files are not cached and icons used in scss files are decoded first before use. As decoding on runtime in production environment doesn't convert these variables under content property to valid value

这篇关于如何在create-react-app中使用icomoon创建的字体图标?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！