Rails 7: Font-awesome icons not showing-CodePudding

I have a problem. In my Rails 7 application I am trying to use Font-Awesome icons. I have installed this npm package and then added:

import "@fortawesome/fontawesome-free"

to my app.ts. After that I checked the page where I have put this icon:

<i ></i>

But the icon is not showing up. Going into inspector mode, I can see that the icon has a height and width of 0:0, so something must be wrong with installation, maybe I am missing something. I already tried installing the Font-Awesome gem, instead of the NPM, but that gave me all kinds of errors with ESBuild about not be able to compile .svg files and a few other extensions. What am I missing here with the installation?

UPDATE

After installing the gem font-awesome-sass and running bundle install, I added the import statement like this in my app.scss:

@import "bootstrap/scss/bootstrap";
@import "font-awesome";

Unfortunately this results in the following error output:

✘ [ERROR] [plugin sass-plugin] Can't find stylesheet to import.
  ╷
9 │ @import "font-awesome";
  │         ^^^^^^^^^^^^^^
  ╵
  - 9:9  root stylesheet

/app/node_modules/esbuild/lib/main.js:1596
  let error = new Error(`${text}${summary}`);
              ^

Error: Build failed with 1 error:
error: Can't find stylesheet to import.
  ╷
9 │ @import "font-awesome";
  │         ^^^^^^^^^^^^^^
  ╵
  - 9:9  root stylesheet
    at failureErrorWithLog (/app/node_modules/esbuild/lib/main.js:1596:15)
    at /app/node_modules/esbuild/lib/main.js:1052:28
    at runOnEndCallbacks (/app/node_modules/esbuild/lib/main.js:1468:61)
    at buildResponseToResult (/app/node_modules/esbuild/lib/main.js:1050:7)
    at /app/node_modules/esbuild/lib/main.js:1162:14
    at responseCallbacks.<computed> (/app/node_modules/esbuild/lib/main.js:697:9)
    at handleIncomingPacket (/app/node_modules/esbuild/lib/main.js:752:9)
    at Socket.readFromStdout (/app/node_modules/esbuild/lib/main.js:673:7)
    at Socket.emit (node:events:513:28)
    at addChunk (node:internal/streams/readable:324:12) {
  errors: [
    {
      detail: undefined,
      id: '',
      location: null,
      notes: [],
      pluginName: 'sass-plugin',
      text: "Can't find stylesheet to import.\n"  
        '\x1B[34m  ╷\x1B[0m\n'  
        '\x1B[34m9 │\x1B[0m @import \x1B[31m"font-awesome"\x1B[0m;\n'  
        '\x1B[34m  │\x1B[0m \x1B[31m        ^^^^^^^^^^^^^^\x1B[0m\n'  
        '\x1B[34m  ╵\x1B[0m\n'  
        '  - 9:9  root stylesheet'
    }
  ],
  warnings: []
}

CodePudding user response：

Is this typo only here or also in your app? (fortawesome = fontawesome)

import "@fortawesome/fontawesome-free"

CodePudding user response：

I see! How strange :) This is how I have it:

gem "font-awesome-sass", "~> 6.1" 
bundle install

@import "bootstrap/scss/bootstrap";
@import "font-awesome";

and icons (FontAwesome 5.15.4 and Free icons that have fas fa-something) work perfectly this way:

 <i ></i>

but they don't work if I want to use unicode icons as content in ::before and and ::after pseudo selectors. After testing on font awesome's own code on codepen and seeing that unicode icons didn't work if the stack was font awesome free, I gave up and am using bootstrap icons for these purposes.