Font awesome icons are not displaying react











up vote
-1
down vote

favorite












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










share|improve this question




























    up vote
    -1
    down vote

    favorite












    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










    share|improve this question


























      up vote
      -1
      down vote

      favorite









      up vote
      -1
      down vote

      favorite











      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










      share|improve this question















      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







      reactjs font-awesome






      share|improve this question















      share|improve this question













      share|improve this question




      share|improve this question








      edited Nov 10 at 16:02

























      asked Nov 10 at 13:40









      Tested

      1551216




      1551216
























          1 Answer
          1






          active

          oldest

          votes

















          up vote
          1
          down vote













          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






          share|improve this answer





















          • dont work className too class also works n .. doesnt work its points outside src
            – Tested
            Nov 10 at 13:51










          • Can you share your project structure? The path to your CSS is wrong. Using class would work but throw an error in React since class is a reserved word in ES6+, so always use className.
            – Davo
            Nov 10 at 13:58










          • classname too doesnt apply FontAwesome. Ihave update my code
            – Tested
            Nov 10 at 14:01












          • According to your file structure, and assuming your index.js file is in the src folder too: import './styles/fontawesome/css/fontawesome.min.css';
            – Davo
            Nov 10 at 14:04












          • ya everything is in src as outside it doesnt support i have edited question
            – Tested
            Nov 10 at 14:12













          Your Answer






          StackExchange.ifUsing("editor", function () {
          StackExchange.using("externalEditor", function () {
          StackExchange.using("snippets", function () {
          StackExchange.snippets.init();
          });
          });
          }, "code-snippets");

          StackExchange.ready(function() {
          var channelOptions = {
          tags: "".split(" "),
          id: "1"
          };
          initTagRenderer("".split(" "), "".split(" "), channelOptions);

          StackExchange.using("externalEditor", function() {
          // Have to fire editor after snippets, if snippets enabled
          if (StackExchange.settings.snippets.snippetsEnabled) {
          StackExchange.using("snippets", function() {
          createEditor();
          });
          }
          else {
          createEditor();
          }
          });

          function createEditor() {
          StackExchange.prepareEditor({
          heartbeatType: 'answer',
          convertImagesToLinks: true,
          noModals: true,
          showLowRepImageUploadWarning: true,
          reputationToPostImages: 10,
          bindNavPrevention: true,
          postfix: "",
          imageUploader: {
          brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
          contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
          allowUrls: true
          },
          onDemand: true,
          discardSelector: ".discard-answer"
          ,immediatelyShowMarkdownHelp:true
          });


          }
          });














           

          draft saved


          draft discarded


















          StackExchange.ready(
          function () {
          StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53239552%2ffont-awesome-icons-are-not-displaying-react%23new-answer', 'question_page');
          }
          );

          Post as a guest
































          1 Answer
          1






          active

          oldest

          votes








          1 Answer
          1






          active

          oldest

          votes









          active

          oldest

          votes






          active

          oldest

          votes








          up vote
          1
          down vote













          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






          share|improve this answer





















          • dont work className too class also works n .. doesnt work its points outside src
            – Tested
            Nov 10 at 13:51










          • Can you share your project structure? The path to your CSS is wrong. Using class would work but throw an error in React since class is a reserved word in ES6+, so always use className.
            – Davo
            Nov 10 at 13:58










          • classname too doesnt apply FontAwesome. Ihave update my code
            – Tested
            Nov 10 at 14:01












          • According to your file structure, and assuming your index.js file is in the src folder too: import './styles/fontawesome/css/fontawesome.min.css';
            – Davo
            Nov 10 at 14:04












          • ya everything is in src as outside it doesnt support i have edited question
            – Tested
            Nov 10 at 14:12

















          up vote
          1
          down vote













          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






          share|improve this answer





















          • dont work className too class also works n .. doesnt work its points outside src
            – Tested
            Nov 10 at 13:51










          • Can you share your project structure? The path to your CSS is wrong. Using class would work but throw an error in React since class is a reserved word in ES6+, so always use className.
            – Davo
            Nov 10 at 13:58










          • classname too doesnt apply FontAwesome. Ihave update my code
            – Tested
            Nov 10 at 14:01












          • According to your file structure, and assuming your index.js file is in the src folder too: import './styles/fontawesome/css/fontawesome.min.css';
            – Davo
            Nov 10 at 14:04












          • ya everything is in src as outside it doesnt support i have edited question
            – Tested
            Nov 10 at 14:12















          up vote
          1
          down vote










          up vote
          1
          down vote









          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






          share|improve this answer












          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







          share|improve this answer












          share|improve this answer



          share|improve this answer










          answered Nov 10 at 13:48









          Davo

          41437




          41437












          • dont work className too class also works n .. doesnt work its points outside src
            – Tested
            Nov 10 at 13:51










          • Can you share your project structure? The path to your CSS is wrong. Using class would work but throw an error in React since class is a reserved word in ES6+, so always use className.
            – Davo
            Nov 10 at 13:58










          • classname too doesnt apply FontAwesome. Ihave update my code
            – Tested
            Nov 10 at 14:01












          • According to your file structure, and assuming your index.js file is in the src folder too: import './styles/fontawesome/css/fontawesome.min.css';
            – Davo
            Nov 10 at 14:04












          • ya everything is in src as outside it doesnt support i have edited question
            – Tested
            Nov 10 at 14:12




















          • dont work className too class also works n .. doesnt work its points outside src
            – Tested
            Nov 10 at 13:51










          • Can you share your project structure? The path to your CSS is wrong. Using class would work but throw an error in React since class is a reserved word in ES6+, so always use className.
            – Davo
            Nov 10 at 13:58










          • classname too doesnt apply FontAwesome. Ihave update my code
            – Tested
            Nov 10 at 14:01












          • According to your file structure, and assuming your index.js file is in the src folder too: import './styles/fontawesome/css/fontawesome.min.css';
            – Davo
            Nov 10 at 14:04












          • ya everything is in src as outside it doesnt support i have edited question
            – Tested
            Nov 10 at 14:12


















          dont work className too class also works n .. doesnt work its points outside src
          – Tested
          Nov 10 at 13:51




          dont work className too class also works n .. doesnt work its points outside src
          – Tested
          Nov 10 at 13:51












          Can you share your project structure? The path to your CSS is wrong. Using class would work but throw an error in React since class is a reserved word in ES6+, so always use className.
          – Davo
          Nov 10 at 13:58




          Can you share your project structure? The path to your CSS is wrong. Using class would work but throw an error in React since class is a reserved word in ES6+, so always use className.
          – Davo
          Nov 10 at 13:58












          classname too doesnt apply FontAwesome. Ihave update my code
          – Tested
          Nov 10 at 14:01






          classname too doesnt apply FontAwesome. Ihave update my code
          – Tested
          Nov 10 at 14:01














          According to your file structure, and assuming your index.js file is in the src folder too: import './styles/fontawesome/css/fontawesome.min.css';
          – Davo
          Nov 10 at 14:04






          According to your file structure, and assuming your index.js file is in the src folder too: import './styles/fontawesome/css/fontawesome.min.css';
          – Davo
          Nov 10 at 14:04














          ya everything is in src as outside it doesnt support i have edited question
          – Tested
          Nov 10 at 14:12






          ya everything is in src as outside it doesnt support i have edited question
          – Tested
          Nov 10 at 14:12




















           

          draft saved


          draft discarded



















































           


          draft saved


          draft discarded














          StackExchange.ready(
          function () {
          StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53239552%2ffont-awesome-icons-are-not-displaying-react%23new-answer', 'question_page');
          }
          );

          Post as a guest




















































































          Popular posts from this blog

          Florida Star v. B. J. F.

          Error while running script in elastic search , gateway timeout

          Adding quotations to stringified JSON object values