search

FortAwesome / react-fontawesome

Font Awesome React component
https://fontawesome.com
MIT License
3.67k stars 262 forks source link

using font awesome icons in css background #226

Open shahab65 opened 5 years ago

shahab65 commented 5 years ago

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 commented 5 years ago

Any luck with this?

JSW888 commented 5 years ago

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 commented 5 years ago

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.