Add Fontawesome to phoenix 1.5

Font Awesome

inside assets folder

yarn add @fortawesome/fontawesome-free

yarn add file-loader

in assets/css/ create a file called _variables.scss add the following line.

$fa-font-path: "~@fortawesome/fontawesome-free/webfonts";

import following in app.scss file.

@import "variables";@import "@fortawesome/fontawesome-free/scss/brands";@import "@fortawesome/fontawesome-free/scss/regular";@import "@fortawesome/fontawesome-free/scss/solid";@import "@fortawesome/fontawesome-free/scss/fontawesome";

If you dont have sass-loader inside rules, in webpack.config.js, add it now

{    test: /\.[s]?css$/,    use: [       MiniCssExtractPlugin.loader,       'css-loader',       'sass-loader',       'postcss-loader'     ],}

Also while in webpack.config.js, lets configure the file-loader to load fontawesome

{    test: /\.(woff(2)?|ttf|eot|svg)(\?v=\d+\.\d+\.\d+)?$/,    use: [        {        loader: 'file-loader',        options: {            name: '[name].[ext]',            outputPath: '../fonts'        }      }   ]},

Add fontawesome icon in app.html.eex. and test it

<i class=”fas fa-bars”></i>

we should see this icon

--

--

--

Depths of ocean could not swallow me.

Love podcasts or audiobooks? Learn on the go with our new app.

Recommended from Medium

🤩 It’s the end of the WEEK, but a great start to LEARN more about @VSTMEX and how it can generate…

Buffer.compare() in nodejs

Moneyfarm web app a brief evolution story

How to unit-test a private (non-exported) function in JavaScript

How React really works?

How do you copy by value a composite data type ?

Steps Function Algo

Creating Reusable Angular Components — How To Avoid the Painful Trap Most Go In

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Sis Ccr

Sis Ccr

Depths of ocean could not swallow me.

More from Medium

How to publish ExDocs on GitHub Pages

Documentation for your developer portal

3 Access DevCon 2022 Video Recordings Released

Pnpm and Nx monorepo. Part 1