Use Font Awesome icon as list bullet of styled-component

I want to use Font Awesome icons as bullets for list items. What I have:

App.js

import { library } from '@fortawesome/fontawesome-svg-core'
import { faCrow } from '@fortawesome/free-solid-svg-icons'
library.add(faCrow)


Component.js

import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'

const StyledUl = styled.ul `
list-style-type: none;
`;

const StyledLi = styled.li`
**here will be li styles**
`;

class Home extends Component {
render() {
return (
<StyledUl>
<StyledLi>
<FontAwesomeIcon icon="crow" size="lg" />
list item 1
</StyledLi>
</StyledUl>
);
}
}

export default Home;


And it works. But how could I set FA icon as a bullet using styled-components? Also I'd like to change bullets colour, like mark completed with green, current as orange, etc

By clicking "Post Your Answer", you acknowledge that you have read our updated terms of service, privacy policy and cookie policy, and that your continued use of the website is subject to these policies.