font-awesome help

[theredorm]

Halo guyz, need your help.
font-awesome cant' work,
my steps:
install FA via yarn
import 'font-awesome/css/font-awesome.css';
can't work;
my assets loader:

const { env, output } = require('../configuration.js');

module.exports = {
  test: /\.(jpg|jpeg|png|gif|svg|eot|ttf|woff|woff2)$/i,
  use: [{
    loader: 'file-loader',
    options: {
      publicPath: output.publicPath,
      name: env.NODE_ENV === 'production' ? '[name]-[hash].[ext]' : '[name].[ext]'
    }
  }]
};

My package.json

{
  "name": "ander",
  "private": true,
  "dependencies": {
    "autoprefixer": "^7.1.2",
    "babel-core": "^6.25.0",
    "babel-loader": "7.x",
    "babel-plugin-syntax-dynamic-import": "^6.18.0",
    "babel-plugin-transform-class-properties": "^6.24.1",
    "babel-plugin-transform-object-rest-spread": "^6.23.0",
    "babel-polyfill": "^6.23.0",
    "babel-preset-env": "^1.6.0",
    "coffee-loader": "^0.7.3",
    "coffee-script": "^1.12.7",
    "compression-webpack-plugin": "^1.0.0",
    "css-loader": "^0.28.4",
    "extract-text-webpack-plugin": "^3.0.0",
    "file-loader": "^0.11.2",
    "font-awesome": "^4.7.0",
    "glob": "^7.1.2",
    "i": "^0.3.5",
    "js-yaml": "^3.9.0",
    "node-sass": "^4.5.3",
    "npm": "^5.3.0",
    "path-complete-extname": "^0.1.0",
    "postcss-cssnext": "^3.0.2",
    "postcss-loader": "^2.0.6",
    "postcss-smart-import": "^0.7.5",
    "precss": "^2.0.0",
    "rails-erb-loader": "^5.0.2",
    "resolve-url-loader": "^2.1.0",
    "sass-loader": "^6.0.6",
    "style-loader": "^0.18.2",
    "stylus": "^0.54.5",
    "stylus-loader": "^3.0.1",
    "url-loader": "^0.5.9",
    "vue": "^2.4.2",
    "vue-loader": "^12.2.2",
    "vue-template-compiler": "^2.4.2",
    "vuetify": "^0.14.5",
    "vuex": "^2.3.1",
    "webpack": "^3.4.1",
    "webpack-manifest-plugin": "^1.2.1",
    "webpack-merge": "^4.1.0"
  },
  "devDependencies": {
    "webpack-dev-server": "^2.6.1"
  }
}

Thanks for the help

[renchap]

What is the error message you get?

For me it works using this in my style.scss

$fa-font-path: "~font-awesome/fonts";
@import '~font-awesome/scss/font-awesome';

[michalhorcic]

This helped me at least. Didn't work for me when adding to assets/application.css. But this way worked great even on production. Thanks a lot.

[ahbou]

PSA font-awesome 5 has been renamed on 5.10

yarn add @fortawesome/fontawesome-free    
yarn add @fortawesome/free-solid-svg-icons

Add on application.scss

$fa-font-path: '~@fortawesome/fontawesome-free/webfonts'; 
@import '~@fortawesome/fontawesome-free/scss/fontawesome';
@import '~@fortawesome/fontawesome-free/scss/solid';

[fgblomqvist]

Didn't have to add the solid svg icons to yarn, but I did have to import both the solid and the regular to be able to use all the "normal" icons:

@import '~@fortawesome/fontawesome-free/scss/fontawesome';
@import '~@fortawesome/fontawesome-free/scss/regular';
@import '~@fortawesome/fontawesome-free/scss/solid';

[h0jeZvgoxFepBQ2C]

This worked for me

yarn add --dev @fortawesome/fontawesome-free

# application.scss
$fa-font-path: '~@fortawesome/fontawesome-free/webfonts'; 
@import '~@fortawesome/fontawesome-free/scss/fontawesome';
@import '~@fortawesome/fontawesome-free/scss/regular';
@import '~@fortawesome/fontawesome-free/scss/solid';

[hectortllo]

PSA font-awesome 5 has been renamed on 5.10

yarn add @fortawesome/fontawesome-free    
yarn add @fortawesome/free-solid-svg-icons

Add on application.scss

$fa-font-path: '~@fortawesome/fontawesome-free/webfonts'; 
@import '~@fortawesome/fontawesome-free/scss/fontawesome';
@import '~@fortawesome/fontawesome-free/scss/solid';

I did exactly what you said and it worked for me! Thanks

[samiggapps]

As of November 2019 I have found this the easiest way to get it all working:

Install via Yarn:

yarn add @fortawesome/fontawesome-free

Import in your application.js file:

import "@fortawesome/fontawesome-free/css/all.css";

Credit to my colleague Ollie Cambridge for this solution 😎

Pretty straightforward and worked for me!

[rgaufman]

@samiggapps this worked for browsers and on iOS in development, but after assets:precompile and deploy to production, I can see icons on browsers, but not on iOS, any ideas at all?

[samiggapps]

@rgaufman I haven't done iOS development so I wouldn't know, hopefully someone else will and post it here. If you crack it, let me know, good luck 👍

[rgaufman]

Hi Sorry, not iOS specifically, just mobile safari.

[jakeNiemiec]

@rgaufman Can you make a new ticket with more details?

[spernica]

import "@fortawesome/fontawesome-free/js/all.js";
import "@fortawesome/fontawesome-free/css/all.css";

This helps in my case.

[paulmwatson]

Thanks for all the pointers, for Rails 6 and font awesome free this works for me (no gem used);
application.scss

...
$fa-font-path: '@fortawesome/fontawesome-free/webfonts';
@import '@fortawesome/fontawesome-free/scss/fontawesome';
@import '@fortawesome/fontawesome-free/scss/solid';
...

manifest.js

...
//= link_tree ../../../node_modules/@fortawesome/fontawesome-free/webfonts/
...

[la-ruby]

One of the most liked answers here (by samiggapps) gave me this warning on heroku:

remote:        WARNING in entrypoint size limit: The following entrypoint(s) combined asset size exceeds the recommended limit (244 KiB). This can impact web performance.
remote:        Entrypoints:
remote:          application (1.54 MiB)
remote:              css/application-eb386482.css
remote:              js/application-537dc6eda555131605e9.js