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 (9)
Hi,
You can include your Pro version source in the gulp config in
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.
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.
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:
Regards,
Alan
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 Alan,
May I know which app are you using? Is it an HTML version? "gulp localhost" command is for the HTML version only.
Thanks
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.
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.
Hi Alan,
Could you please try to add the font awesome path reference to
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
Thanks
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/fontsThanks
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:
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
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,
Have you changed anything from package.json file?
By default,
Thanks
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
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,
Thank you for taking the time as well to inform us. We will check it further and provide the necessary fixes.
Thanks
Thank you for taking the time as well to inform us. We will check it further and provide the necessary fixes.
Thanks
React Dev Vacancy
KeenThemes is looking for a Junior React or Vue developer to build awesome apps.
Apply
