add font awesome

assets/css/app.scss

@@ -2,6 +2,12 @@
 @import "tailwindcss/components";
 @import "tailwindcss/utilities";
 
+$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";
+@import "@fortawesome/fontawesome-free/scss/brands";
+
 @import "components";
 
 /* LiveView specific classes for your customizations */

assets/package.json

@@ -7,6 +7,9 @@
     "watch": "webpack --mode development --watch --watch-options-stdin"
   },
   "dependencies": {
+    "@fortawesome/fontawesome-free": "^5.15.4",
+    "install": "^0.13.0",
+    "npm": "^7.22.0",
     "phoenix": "file:../deps/phoenix",
     "phoenix_html": "file:../deps/phoenix_html",
     "phoenix_live_view": "file:../deps/phoenix_live_view",
@@ -20,6 +23,7 @@
     "copy-webpack-plugin": "^9.0.0",
     "css-loader": "^5.2.7",
     "css-minimizer-webpack-plugin": "^3.0.1",
+    "file-loader": "^6.2.0",
     "hard-source-webpack-plugin": "^0.13.1",
     "mini-css-extract-plugin": "^1.6.0",
     "node-sass": "^6.0.0",

assets/webpack.config.js

@@ -41,6 +41,14 @@ module.exports = (env, options) => {
             "postcss-loader",
             "sass-loader",
           ],
+        },
+        {
+          test: /\.(woff(2)?|ttf|eot|svg|otf)(\?v=[0-9]\.[0-9]\.[0-9])?$/,
+          loader: 'file-loader',
+          options: {
+            name: '[name].[ext]?[hash]',
+            outputPath: '../fonts'
+          }
         }
       ]
     },