Angular FontAwesome Pro

Topic: Angular FontAwesome Pro

Jason Caruso free asked 3 years ago

Expected behavior

I would like to add FontAwesome Pro to my project and i have a pro license with them. Should I be able to add it and use mdb-icon in Angular with those Pro Icons?

Actual behavior

Does not work:

<mdb-icon fas icon="search" aria-hidden="true"></mdb-icon>

Does work:

<i class="fas fa-search"></i>

Resources (screenshots, code snippets etc.)

Arkadiusz Idzikowski staff commented 3 years ago

It should not matter here if you use the Free or Pro version, especially if the non-component version works correctly. Are there any errors in the console when you add <mdb-icon to the app view?

Add comment

Jason Caruso free answered 3 years ago

0 0 Best answer

<a href="/profile/?id=40205" target="_blank" rel="nofollow">@Arkadiusz Idzikowski</a> in my Angular.js I have the following styles and scripts:

<pre class="prettyprint"><code> "styles": [
 "node_modules/@fortawesome/fontawesome-free/scss/fontawesome.scss", "node_modules/@fortawesome/fontawesome-pro/css/all.min.css",
 "node_modules/@fortawesome/fontawesome-free/scss/solid.scss", 
 "node_modules/@fortawesome/fontawesome-free/scss/regular.scss", 
 "node_modules/@fortawesome/fontawesome-free/scss/brands.scss",
 "node_modules/@fortawesome/fontawesome-pro/css/all.min.css",
 "node_modules/ng-uikit-pro-standard/assets/scss/bootstrap/bootstrap.scss",
 "node_modules/ng-uikit-pro-standard/assets/scss/mdb.scss",
 "src/styles.scss"
 ],
 "scripts": [
 "node_modules/@fortawesome/fontawesome-pro/js/all.min.js",
 "node_modules/chart.js/dist/Chart.js",
 "node_modules/easy-pie-chart/dist/easypiechart.js",
 "node_modules/screenfull/dist/screenfull.js",
 "node_modules/hammerjs/hammer.min.js"
 ]
</code></pre>

No, mdb-icon is not working.

Please insert min. 20 characters.

@Arkadiusz Idzikowski in my Angular.js I have the following styles and scripts:

        "styles": [
          "node_modules/@fortawesome/fontawesome-free/scss/fontawesome.scss",                 "node_modules/@fortawesome/fontawesome-pro/css/all.min.css",
          "node_modules/@fortawesome/fontawesome-free/scss/solid.scss", 
          "node_modules/@fortawesome/fontawesome-free/scss/regular.scss",   
          "node_modules/@fortawesome/fontawesome-free/scss/brands.scss",
          "node_modules/@fortawesome/fontawesome-pro/css/all.min.css",
          "node_modules/ng-uikit-pro-standard/assets/scss/bootstrap/bootstrap.scss",
          "node_modules/ng-uikit-pro-standard/assets/scss/mdb.scss",
          "src/styles.scss"
        ],
        "scripts": [
          "node_modules/@fortawesome/fontawesome-pro/js/all.min.js",
          "node_modules/chart.js/dist/Chart.js",
          "node_modules/easy-pie-chart/dist/easypiechart.js",
          "node_modules/screenfull/dist/screenfull.js",
          "node_modules/hammerjs/hammer.min.js"
        ]

No, mdb-icon is not working.

Jason Caruso free commented 3 years ago

If i remove the pro css and js and the free version works.

Arkadiusz Idzikowski staff commented 3 years ago

Can you check if there are any errors in the browser console when you try to use mdb-icon component (with the configuration in which the component doesn't work)?

Jason Caruso free commented 3 years ago

@Arkadiusz Idzikowski Sorry for the late response... Here is the error I get:

client:135 Conflict: Multiple assets emit different content to the same filename fa-regular-400.eot
warnings @ client:135
client:135 Conflict: Multiple assets emit different content to the same filename fa-solid-900.eot
warnings @ client:135
client:135 Conflict: Multiple assets emit different content to the same filename fa-regular-400.woff2
warnings @ client:135
client:135 Conflict: Multiple assets emit different content to the same filename fa-solid-900.woff2
warnings @ client:135
client:135 Conflict: Multiple assets emit different content to the same filename fa-regular-400.woff
warnings @ client:135
client:135 Conflict: Multiple assets emit different content to the same filename fa-solid-900.woff
warnings @ client:135
client:135 Conflict: Multiple assets emit different content to the same filename fa-regular-400.ttf
warnings @ client:135
client:135 Conflict: Multiple assets emit different content to the same filename fa-solid-900.ttf
warnings @ client:135
client:135 Conflict: Multiple assets emit different content to the same filename fa-regular-400.svg
warnings @ client:135
client:135 Conflict: Multiple assets emit different content to the same filename fa-solid-900.svg
warnings @ client:135
client:135 Conflict: Multiple assets emit different content to the same filename fa-brands-400.eot
warnings @ client:135
client:135 Conflict: Multiple assets emit different content to the same filename fa-brands-400.woff2
warnings @ client:135
client:135 Conflict: Multiple assets emit different content to the same filename fa-brands-400.woff
warnings @ client:135
client:135 Conflict: Multiple assets emit different content to the same filename fa-brands-400.ttf
warnings @ client:135
client:135

<a href="/profile/?id=40205" target="_blank" rel="nofollow">@Arkadiusz Idzikowski</a> Sorry for the late response... Here is the error I get:

<pre class="prettyprint"><code>client:135 Conflict: Multiple assets emit different content to the same filename fa-regular-400.eot
warnings @ client:135
client:135 Conflict: Multiple assets emit different content to the same filename fa-solid-900.eot
warnings @ client:135
client:135 Conflict: Multiple assets emit different content to the same filename fa-regular-400.woff2
warnings @ client:135
client:135 Conflict: Multiple assets emit different content to the same filename fa-solid-900.woff2
warnings @ client:135
client:135 Conflict: Multiple assets emit different content to the same filename fa-regular-400.woff
warnings @ client:135
client:135 Conflict: Multiple assets emit different content to the same filename fa-solid-900.woff
warnings @ client:135
client:135 Conflict: Multiple assets emit different content to the same filename fa-regular-400.ttf
warnings @ client:135
client:135 Conflict: Multiple assets emit different content to the same filename fa-solid-900.ttf
warnings @ client:135
client:135 Conflict: Multiple assets emit different content to the same filename fa-regular-400.svg
warnings @ client:135
client:135 Conflict: Multiple assets emit different content to the same filename fa-solid-900.svg
warnings @ client:135
client:135 Conflict: Multiple assets emit different content to the same filename fa-brands-400.eot
warnings @ client:135
client:135 Conflict: Multiple assets emit different content to the same filename fa-brands-400.woff2
warnings @ client:135
client:135 Conflict: Multiple assets emit different content to the same filename fa-brands-400.woff
warnings @ client:135
client:135 Conflict: Multiple assets emit different content to the same filename fa-brands-400.ttf
warnings @ client:135
client:135 
</code></pre>

Please insert min. 15 characters.

Arkadiusz Idzikowski staff commented 3 years ago

@Jason Caruso please try to remove all FA Free imports from the styles array in angular.json file.

Add comment

Write

Create snippet

FREE CONSULTATION

Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.

Status

Answered

Specification of the issue

ForumUser: Free
Premium support: No
Technology: MDB Angular
MDB Version: 10.1.1
Device: Desktop
Browser: Chrome
OS: Windows
Provided sample code: No
Provided link: No

Jason Caruso

37Support score
1Questions 3Answers 0Snippets