How to add Font Awesome Pro icon set to your Metronic based web app
Font Awesome Pro is a premium icon set and toolkit that offers over 8,000 vector icons and social logos for your website. You can use them to enhance your design, add interactivity, and create stunning effects. In this guide, we will show you how to set up Font Awesome Pro with Gulp and Webpack, two build tools in Metronic for web development.
Prerequisites
Before you start, you need to have the following:
- A valid license for Font Awesome Pro. You can purchase one from Font Awesome Pro.
- A copy of Metronic, an HTML template that comes with gulp and webpack configurations. You can get it from Buy Metronic.
Setup
First, you need to refer to the setup guide to build the assets for Metronic. You can find it Metronic Setup. Follow the instructions to install the dependencies and build the assets.
Next, you need to proceed with the build tools setup for gulp and webpack to include Font Awesome Pro icon set.
For gulp build
- Unpack the
fontawesome-pro-6.4.0-web.zip file and place it in this folder: src/plugins/fontawesome-pro-6.4.0-web.- Open
tools/gulp.config.js file and add the following code in gulp config under build > plugins > global > src > optional:"fontawesome-pro-6.4.0-web": {
styles: [
"{$config.path.common_src}/plugins/fontawesome-pro-6.4.0-web/css/all.css",
],
fonts: [
"{$config.path.common_src}/plugins/fontawesome-pro-6.4.0-web/webfonts/**",
],
},- Rebuild the assets using gulp command.
For webpack build
- Open and edit file
tools/webpack/plugins/plugins.scss.- Need to remove below line, otherwise the Font Awesome Pro will conflict:
@import "~@fortawesome/fontawesome-free/css/all.min.css";- Then add following line in the file
tools/webpack/plugins/plugins.scss:@import "~@/src/plugins/fontawesome-pro-6.4.0-web/css/all.css";- Rebuild the assets using npm run build command.
Usage
Now you are ready to use Font Awesome Pro icons on your website. Refer to this page on how to add Font Awesome font into your page: Metronic Font Awesome page.
Here are some samples of icon usage:
<i class="fas fa-envelope-open-text"></i>
<i class="fab fa-affiliatetheme"></i>
<i class="fas fa-mail-bulk"></i>
<i class="fas fa-coins"></i>
<i class="fas fa-chart-pie"></i>
<i class="fas fa-percentage"></i>
<i class="fas fa-print"></i>
<i class="fas fa-pen-nib"></i>You can also use different styles, sizes, colors, animations, and other features of Font Awesome Pro. Check out their documentation for more details: Font Awesome.
Replies (4)
thanks for sharing
Hi Carlos,
Thank you for sharing your solution! It's great to hear that you were able to resolve the issue with FontAwesome icons in Laravel Starter Kit 8.2.0 by updating the Webpack configuration.
Your revised configuration:
{
// fontawesome
search: /url\(.*?((fa-.*?)\..*?)"?\)/g,
replace: "url(./fonts/$2/$1)",
}should indeed help other users who might encounter a similar problem. Your input is valuable, and we appreciate you sharing the solution here. If you have any more questions or run into any issues in the future, please feel free to reach out for assistance.
fixed it by this:
{
// fontawesome
search: /url\(.*?((fa-.*?)\..*?)'?\)/g,
replace: 'url(./fonts/$2/$1)',
},
thanks
I'm using Laravel starter kit 8.2.0, Do we need to change this on webpack?
{
// fontawesome
search: /url\((\.\.\/)?webfonts\/(fa-.*?)"?\)/g,
replace: 'url(./fonts/@fortawesome/$2)',
},
when I build with yarn run prod I get this on console when trying to use icons duotone from fontawesome:
GET https://m820.test/assets/plugins/global/fonts/@fortawesome/fa-duotone-900.woff2 net::ERR_ABORTED 404 (Not Found)
plugins.bundle.css:1 GET https://m820.test/assets/plugins/global/fonts/@fortawesome/fa-duotone-900.ttf 404 (Not Found)
