Can't be able to use Font awesome icons in CSS after/before using React JS Styled component

Question

`I am using styled component given below:-

export const Button = styled.a`
  padding:.8rem 2.5rem;
  padding-right: 3.5rem;
  border-radius:8px;
  transition: .3s;
  color:#f23801;

span {
    position: relative;
    transition: 0.3s;
    &::after {
      content: "\f061";
      font-family: "FontAwesome";
      position: absolute;
      right: -20px;
      transition: 0.3s;
    }
`

My pseudo element is removed when using Font Awesome icons, please resolve this`

Answer 1

export const Button = styled.a`
  padding: 0.8rem 2.5rem;
  padding-right: 3.5rem;
  border-radius: 8px;
  transition: 0.3s;
  color: #f23801;

  span {
    position: relative;
    transition: 0.3s;
    &::after {
      /* Changed content: "\f061" to content: "\\f061" to use a Font Awesome icon */
      content: "\\f061";
      font-family: "fontawesome";
      position: absolute;
      right: -20px;
      transition: 0.3s;
    }
  }
`;

This change should help you use Font Awesome icons successfully in your styled component. Make sure you have the Font Awesome library properly installed and accessible in your project.