here I have a working codepen using HTML, where the icons (Plus) are shown. In the HTML header there is fontawesome directly imported. https://codepen.io/jartysharky/pen/YzQvzrv
No I want to use these Icons without HMTL. In my App.js I have the following to import my styles and link to the component:
import './assets/scss/style.scss'; const App = () => { return ( <Router> <PageScrollTop> <Switch> <Route path={`${process.env.PUBLIC_URL + "/"}`} exact component={Form}/> Then in the Form component I got my main form content that can be seen in the codepen. Because the .scss is imported in the App.js, I also got all my styles in the Form.js. My problem is that the icons are not shown and are only rectangles. Because there is no HTML I can't simply import fontawesome in the head, so I decided to import it directly in my style.sccs.
I have tried using @import "https://use.fontawesome.com/releases/v5.8.2/css/all.css"; in my style.scss but the icons seem not to be found How do I need to import fontawesome in my css files so that they get recognized?
When I import several icons into the component I can use them regularly using their names in React, but I need to be able to use the unicodes of the icons in the css part.
ul.ks-cboxtags li label::before { display: inline-block; font-style: normal; font-variant: normal; text-rendering: auto; -webkit-font-smoothing: antialiased; font-family: "Font Awesome 5 Free"; font-weight: 900; font-size: 12px; padding: 2px 6px 2px 2px; content: "\f067"; transition: transform .3s ease-in-out; } 