我有一个react.js web应用程序和一个REST API，它返回一大块原始HTML（不是完整的页面）。我通过废弃一个网站并使用cherrio.js抓取一段标记来获得HTML。在开发人员工具中，响应本身就是标记。我使用dangerouslySetInnerHTML={{ __html：htmlMarkup }}元素属性，以便react知道将其显示为内部HTML。
然而，我需要在其中插入一些FontAwesome图标。我已经尝试了直接使用<i class="fa-solid fa-star-sharp"></i>的HTML和react版本<FontAwesomeIcon icon="fa-solid fa-star-sharp" />。这两个版本都直接来自FA文档。
在插入HTML的组件中，我导入FontAwesomeIcon组件（import { FontAwesomeIcon } from“@fortawesome/react-fontawesome”;），并使用我导入到我的根JS文件中的SASS文件导入FontAwesome CDN CSS文件。我还导入了@fortawesome/fontawesome-svg-core/styles.css文件。
SASS文件：fa.scss @import url（https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.3.0/css/fontawesome.min.css）;
index.js import 'fa. scss';
但是，在加载HTML标记、插入图标并设置dangerouslySetInnerHTML属性之后，图标不会显示。
我错过了什么？
1条答案
按热度按时间pnwntuvh1#
我通过使用react-icons解决了这个问题。我通过将我想要的图标添加到常规页面，在Chrome开发工具中检查HTML元素，并将react-icons为图标生成的SVG复制到我的代码中的字符串中。然后我将标记中使用的图标替换为SVG标记。
很管用。
还有一种方法是以编程方式将所需的FontAwesome CSS文件作为react元素添加到标记中，这也是可行的。但是当我看到react-icons有我需要的一切并且是免费的时，我就切换了。