diff --git a/assets/css/app.scss b/assets/css/app.scss index a475031..349e5e3 100644 --- a/assets/css/app.scss +++ b/assets/css/app.scss @@ -1,5 +1,9 @@ /* This file is for your main application css. */ @import "./phoenix.css"; +$fa-font-path: '~@fortawesome/fontawesome-free/webfonts'; +@import '~@fortawesome/fontawesome-free/scss/fontawesome'; +@import '~@fortawesome/fontawesome-free/scss/solid'; +@import '~@fortawesome/fontawesome-free/scss/regular'; /* Alerts and form errors */ .alert { diff --git a/assets/package.json b/assets/package.json index f433fd5..833837d 100644 --- a/assets/package.json +++ b/assets/package.json @@ -7,6 +7,7 @@ "watch": "webpack --mode development --watch" }, "dependencies": { + "@fortawesome/fontawesome-free": "^5.13.0", "phoenix": "file:../deps/phoenix", "phoenix_html": "file:../deps/phoenix_html" }, @@ -16,10 +17,11 @@ "babel-loader": "^8.0.0", "copy-webpack-plugin": "^5.1.1", "css-loader": "^3.4.2", - "sass-loader": "^8.0.2", - "node-sass": "^4.13.1", + "file-loader": "^6.0.0", "mini-css-extract-plugin": "^0.9.0", + "node-sass": "^4.13.1", "optimize-css-assets-webpack-plugin": "^5.0.1", + "sass-loader": "^8.0.2", "terser-webpack-plugin": "^2.3.2", "webpack": "4.41.5", "webpack-cli": "^3.3.2" diff --git a/assets/webpack.config.js b/assets/webpack.config.js index dd77c3d..857ba37 100644 --- a/assets/webpack.config.js +++ b/assets/webpack.config.js @@ -40,7 +40,17 @@ module.exports = (env, options) => { 'css-loader', 'sass-loader', ], - } + }, +{ + test: /\.(woff(2)?|ttf|eot|svg)(\?v=\d+\.\d+\.\d+)?$/, + use: [{ + loader: 'file-loader', + options: { + name: '[name].[ext]', + outputPath: '../fonts' + } + }] + }, ] }, plugins: [ diff --git a/lib/foo_web/templates/layout/app.html.eex b/lib/foo_web/templates/layout/app.html.eex index f071068..4a2b954 100644 --- a/lib/foo_web/templates/layout/app.html.eex +++ b/lib/foo_web/templates/layout/app.html.eex @@ -11,6 +11,7 @@
+