Introducing ReUI:Open-source UI components and apps built with React, Next.js and Tailwind CSS
Browse ReUI

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?


Text formatting options
Submit
Here's a how to add some HTML formatting to your comment:
  • <pre></pre> for JS codes block
  • <pre lang="html"></pre> for HTML code block
  • <pre lang="scss"></pre> for SCSS code block
  • <pre lang="php"></pre> for PHP code block
  • <code></code> for single line of code
  • <strong></strong> to make things bold
  • <em></em> to emphasize
  • <ul><li></li></ul>  to make list
  • <ol><li></li></ol>  to make ordered list
  • <h3></h3> to make headings
  • <a></a> for links
  • <img> to paste in an image
  • <blockquote></blockquote> to quote somebody
  • happy  :)
  • shocked  :|
  • sad  :(

Replies (14)


Consequently, starting in the amount of electronic marketing strategy, is whenever a company's existing website, which will be to review the present site and its purpose is to improve the potency of the future. There is no evidence that the development an
Prime Biome



After confirming its safety and reliability, we'll publish a complete review with a download link, Delta Executor v2.664 showcasing its effectiveness as a powerful script execution tool.



Consequently, starting in the amount of electronic marketing strategy, is whenever a company's existing website, which will be to review the present site and its purpose is to improve the potency of the future. There is no evidence that the development and implementation of a method to be significantly different way of electronic marketing. Strategic planning for enterprise development or strategic marketing to comply with the established framework should still be
wps中文



In this article understand the most important thing, the item will give you a keyword rich link a great useful website page:triple monitor mount stand



@slice master I always appreciate FontAwesome's support.



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.


Text formatting options
Submit
Here's a how to add some HTML formatting to your comment:
  • <pre></pre> for JS codes block
  • <pre lang="html"></pre> for HTML code block
  • <pre lang="scss"></pre> for SCSS code block
  • <pre lang="php"></pre> for PHP code block
  • <code></code> for single line of code
  • <strong></strong> to make things bold
  • <em></em> to emphasize
  • <ul><li></li></ul>  to make list
  • <ol><li></li></ol>  to make ordered list
  • <h3></h3> to make headings
  • <a></a> for links
  • <img> to paste in an image
  • <blockquote></blockquote> to quote somebody
  • happy  :)
  • shocked  :|
  • sad  :(
Text formatting options
Submit
Here's a how to add some HTML formatting to your comment:
  • <pre></pre> for JS codes block
  • <pre lang="html"></pre> for HTML code block
  • <pre lang="scss"></pre> for SCSS code block
  • <pre lang="php"></pre> for PHP code block
  • <code></code> for single line of code
  • <strong></strong> to make things bold
  • <em></em> to emphasize
  • <ul><li></li></ul>  to make list
  • <ol><li></li></ol>  to make ordered list
  • <h3></h3> to make headings
  • <a></a> for links
  • <img> to paste in an image
  • <blockquote></blockquote> to quote somebody
  • happy  :)
  • shocked  :|
  • sad  :(