FontAwesome 6
I have my own license for FontAwesome and would like to use v6.2.1 rather than the version that is bundled with Metronic. What do I need to do to implement this?
Replies (10)
Hi Alan,
Thank you for taking the time as well to inform us. We will check it further and provide the necessary fixes.
Thanks
Hi Alan,
Have you changed anything from package.json file?
By default, "type": "module" should be in the package.json file. If it is available could you please try to add it?
{
"name": "keenthemes",
.........
"type": "module",
"dependencies": {
..........Thanks
Hi Faizal,
It turned out to be a corrupt package.json file. I'm not sure how that happened but I replaced it with the file from the original download and now everything is working as expected.
Thank you for your time and patience.
Alan
Hi Alan,
Could you please try to add the font awesome path reference to /Starterkit/_keenthemes/tools/gulp.config.js? You can refer to @fortawesome.
Then recompile your assets folder with Gulp. https://preview.keenthemes.com/html/metronic/docs/getting-started/build/gulp
Then the font awesome will bundle together in the file plugins/global/plugins.bundle.css and the font folder will be moved to plugins/global/fonts
Thanks
Hi,
I have copied the FontAwesome 6 folder to the same location as fontawesome-free folder.
In the gulp.config.js file I edited the @fortawesome entry to reference this folder:
"@fortawesome": {
styles: [
"{$config.path.node_modules}/@fortawesome/fontawesome-pro-6.2.1-web/css/all.min.css",
],
fonts: [
"{$config.path.node_modules}/@fortawesome/fontawesome-pro-6.2.1-web/webfonts/**",
],I then followed the instructions in the link that you sent to recompile with Gulp. When I reach Step 8 and type 'gulp' then I get the error that I posted above regarding the 'import'.
Not sure if it matters but I am using a MacBook with macOS Ventura 13.1 (I notice that a lot of .Net documentation assumes that developers still only use Windows)
Regards,
Alan
Hi Alan,
May I know which app are you using? Is it an HTML version? "gulp localhost" command is for the HTML version only.
Thanks
I am using the ASP.Net Core version. I'm a back-end developer so don't really understand any of this front-end stuff, hence the reason for using a template. I just followed the instructions on the Webpack link as instructed.
From your original message, I wasn't sure whether I should add the FontAwesome folder to the fortawesome folder and include a new entry in the gulp.config.js file, or to leave the gulp.config.js file alone and replace the FA5 folder with the contents of FA6. I tried both ways but neither worked as I can't get any of the FA6 icons to appear.
I'm not having much luck with this, getting lots of errors.
I have replaced my _keenthemes folder with the original one that I downloaded and started again.
I had the same problem as reported here: https://devs.keenthemes.com/question/can-not-build-project
so I replaced my package.json file with the contents of the gist mentioned in that ticket.
I can now get to the point where I type "gulp localhost" which results in the following error:
_keenthemes/tools/gulpfile.js:1
import { cleanTask } from "./gulp/clean.js";
^^^^^^
SyntaxError: Cannot use import statement outside a module
at internalCompileFunction (node:internal/vm:74:18)
at wrapSafe (node:internal/modules/cjs/loader:1141:20)
at Module._compile (node:internal/modules/cjs/loader:1182:27)
at Module._extensions..js (node:internal/modules/cjs/loader:1272:10)
at Module.load (node:internal/modules/cjs/loader:1081:32)
at Module._load (node:internal/modules/cjs/loader:922:12)
at Module.require (node:internal/modules/cjs/loader:1105:19)
at require (node:internal/modules/cjs/helpers:103:18)
at requireOrImport (/opt/homebrew/lib/node_modules/gulp-cli/lib/shared/require-or-import.js:19:11)
at execute (/opt/homebrew/lib/node_modules/gulp-cli/lib/versioned/^4.0.0/index.js:37:3)Regards,
Alan
Hi,
You can include your Pro version source in the gulp config in tools/gulp.config.js like the free version include:
"@fortawesome": {
styles: [
"{$config.path.node_modules}/@fortawesome/fontawesome-free/css/all.min.css",
],
fonts: [
"{$config.path.node_modules}/@fortawesome/fontawesome-free/webfonts/**",
],
},Then recompile your assets folder with Gulp or Webpack.
Please note that the build tools are required only in the development environment just to compile the assets when the source folder files are modified. In the hosting/server deployment, you will only need the compile assets, no need to install the build tools dependencies there.
Regards.
Regards.
