Ndtyjky

I'm using font awesome and have imported it in index.js

import '././styles/fontawesome/css/fontawesome.min.css';

following in filter component

<span  onClick={this.togglem.bind(this)}>

                 {/*<span className="rTitle">Filters</span>*/}

                 <i className="fa fa-filter" aria-hidden="true"></i>

</span>

Here, the icon fa-filter is not getting displayed can anyone lemme know whats going wrong

Using double dots its throws this exception .You attempted to import ../../../styles/fontawesome/css/fontawesome.min.css which falls outside of the project src/ directory. Relative imports outside of src/ are not supported.

structure is

  src/filter.js  



  src/styles/fontawesome

version -5.5.0

i've imported in filter pointings are all right it show the css styles
when inspected but does not show the icon

Your import looks wrong import '././styles/fontawesome/css/fontawesome.min.css'; you're probably looking for import '../../styles/fontawesome/css/fontawesome.min.css'; (pay attention to the dots).

If you're using React with JSX (you're most likely doing it) you need to use className to define html class attribute:

<i className="fa fa-filter" aria-hidden="true"></i>

Also, the right way to use FontAwesome in React in documented here: https://fontawesome.com/how-to-use/on-the-web/using-with/react