using font awesome icons in css background

[shahab65]

hello I am using react-fontawesome library like this in my components: import {FontAwesomeIcon} from "@fortawesome/react-fontawesome"; import {faSearch} from "@fortawesome/free-solid-svg-icons";

but what if I want to use icons in css ? for example I have a input with search-input in background, how can I import faSearch icon in a css file and use it? thanks

[dworzycp]

Any luck with this?

[JSW888]

Also looking for an answer on this. I'm having to import the FA stylesheet separately from the CDN right now which isn't ideal.

[Rycochet]

Use a bundler such as webpack, and use relative paths for the icons directly (pointing into ../node_modules/@fontawesome/...etc), and then in your bundler use an importer that understands to turn css relative files into inline data: urls.

The major downside to doing this is that they're now images and not inline svg - which means they're black on transparent, and short of using css filter: ... you're unable to change that colour.