Question

我能够将各种FontAwesome图标渲染到我的React App，但同时 - 在我的页面顶部，它还渲染了FontAwesome附带的原始css样式。如果我检查我的页面 - 我看到一个样式元素，其中type = css。我相信我正在处理我的webpack中的CSS文件：

  {
    test: /\.css$/,  
    include: /node_modules/,  
    loaders: ['style-loader', 'css-loader'],
  },

不确定为什么会这样做。

Answer 1

如果您使用Font Awesome 5 SVG with JS，则默认情况下，Font Awesome会在第一次呈现图标时自动添加其CSS，除非您在配置中将autoAddCss设置为false 。您可以在此处查看有关setting the config options的更多信息。要禁用它，您可以添加<script>块以在加载Font Awesome js之前设置config ，如下所示：

<script type="text/javascript"> window.FontAwesomeConfig = { autoAddCss: false } </script>

或者，像这样在JavaScript模块中加载FontAwesome- 之前 FontAwesome尝试渲染第一个图标：

import fontawesome from "@fortawesome/fontawesome"; fontawesome.config = { autoAddCss: false };

更新：上面的示例是当前方法，从Font Awesome 5.0.x开始。随着5.1的发布，我们将采用不同的方式来实现它，我们在preview docs here中对此进行了记录。

React将FontAwesome样式呈现为页面

1 个答案: