css - 使用 FontAwesome Unicode 反应样式化组件

Question

我必须遵循代码段：

import "./styles.css";
import styled from "styled-components";

const TreeNode = styled.li`
  &:before {
    font-family: "Font Awesome 5 Free";
    margin-right: 10px;
    font-weight: 600;
    content: ${(props) => String.fromCharCode(props.icon, 16)};
    color: ${(props) => props.iconcolor};
  }`;

export default function App() {
  return (
    <ul>
      <TreeNode icon="f004" iconcolor="red">
        Node Will Go Here!
      </TreeNode>
    </ul>
  );
}

我遇到的问题是图标没有出现。如何操作 TreeNode 组件以显示可变 FontAwesome 图标？

标签： cssreactjs