Topic: Angular FontAwesome Pro
Jason Caruso asked 4 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.)
Jason Caruso answered 4 years ago
@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 commented 4 years ago
If i remove the pro css and js and the free version works.
Arkadiusz Idzikowski staff commented 4 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 commented 4 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
Arkadiusz Idzikowski staff commented 4 years ago
@Jason Caruso please try to remove all FA Free imports from the styles array in angular.json
file.
FREE CONSULTATION
Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.
Answered
- User: 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
Arkadiusz Idzikowski staff commented 4 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?