Navigate to your phoenix app assets directory:
cd your_app/assets
Install free edition of fontawesome as explained here:
npm install --save-dev @fortawesome/fontawesome-free
You will see package.json
updated with a new entry:
..
"devDependencies": {
"@babel/core": "^7.0.0",
"@babel/preset-env": "^7.0.0",
"@fortawesome/fontawesome-free": "^5.9.0",
...
You will have to install file-loader
package as well: npm install file-loader
.
Then modify webpack.config.js
to be able to copy awesome fonts and extract SCSS files:
module: {
rules: [
{
test: /\.js$/,
exclude: /node_modules/,
use: {
loader: 'babel-loader'
}
},
{
test: /\.(css|sass|scss)$/,
use: [MiniCssExtractPlugin.loader, 'css-loader', 'sass-loader']
},
{
test: /\.(woff(2)?|ttf|eot|svg)(\?v=\d+\.\d+\.\d+)?$/,
use: [{
loader: 'file-loader',
options: {
name: '[name].[ext]',
outputPath: '../fonts'
}
}]
}
]
},
...
Next, modify your app.scss
file as follows (I also use Bootrstrap, so remove the related import if you don’t use it):
@import "custom";
@import "~bootstrap/scss/bootstrap";
@import "~@fortawesome/fontawesome-free/scss/fontawesome";
@import "~@fortawesome/fontawesome-free/scss/regular";
@import "~@fortawesome/fontawesome-free/scss/solid";
@import "~@fortawesome/fontawesome-free/scss/brands";
And finally, my _custom.scss
file (remove $primary
containing line, it is for Bootrstap override):
/* Boostrap overrides */
$primary: #F92653;
/* Fontawesome 5 config */
$fa-font-path: "~@fortawesome/fontawesome-free/webfonts"
Hope, this helps.