Suggestion: Support for Font Awesome Pro

web
mobile

Topic: Suggestion: Support for Font Awesome Pro

tommykjensen pro priority vip early access asked 5 months ago

I would very much like to be able to use Font Awesome Pro icons with mdb-icon.

Take following examples:

From free fontawesome, this works

<mdb-icon fas icon="glasses"></mdb-icon>

Icon from Pro Fontwaesome in the mdb-icon directive. I have tried several different versions and none are working.

<mdb-icon fad icon="fad fa-glasses"></mdb-icon>

And last using icon directly from Fontawsome Pro not as a mdb-icon and this works

<i class="fad fa-glasses"></i>

What I would like to be able to do is to use the pro icon directly in the mdb-icon directive (example 2).


Arkadiusz Idzikowski staff answered 5 months ago

Thanks for additional information. I edited your first post and removed unnecessary comments. In the future please try to include all important information in your question (you can always edit the first post). Answers should only contain a solution for the problem.

We currently don't have support for the 'Duotone icons'. We need to create new 'fad' directive.

I added this to our to-do list. We can't provide an ETA for this feature yet but it has high priority so I think it will be added in the near future.

As a workaround you can try to add class="fad" to the mdb-icon element instead of fad directive:<mdb-icon class="fad" icon="glasses"></mdb-icon>


nothingeni pro commented 5 months ago

Hello,

I have the same problem, I can't get Pro FontAwesome to work with <mdb-icon>.

angular.json

"styles": [
          "node_modules/@fortawesome/fontawesome-pro/scss/fontawesome.scss",
          "node_modules/@fortawesome/fontawesome-pro/scss/solid.scss",
          "node_modules/@fortawesome/fontawesome-pro/scss/regular.scss",
          "node_modules/@fortawesome/fontawesome-pro/scss/brands.scss",
          "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/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",
          "node_modules/@fortawesome/fontawesome-pro/js/all.js"
        ]

(npm install of FontAwesome pro worked successfully)

Icon used for the example : bed-alt (https://fontawesome.com/icons/bed-alt?style=solid)

Examples i've tried...

<mdb-icon fas icon="fa-bed-alt"></mdb-icon> //Not working

<mdb-icon class="fas" icon="fa-bed-alt"></mdb-icon> //Not working

<mdb-icon icon="fas fa-bed-alt"></mdb-icon> //Not working

<i class="fas fa-bed-alt"></i> //Working

Did I made anything wrong ? Thanks in advance for help!


Arkadiusz Idzikowski staff commented 5 months ago

Please take a look at my answer. You need to pass only icon name to the icon input of mdb-icon component (there was a typo in my answer that suggested that the 'fa' is needed as well, I already edited my post).

For example: <mdb-icon fas icon="bed-alt"></mdb-icon>


nothingeni pro commented 5 months ago

Thanks for you answer.

I tried your suggestion : <mdb-icon fas icon="bed-alt"></mdb-icon> but it still doesn't work. The icon stays error ('?/!').

I'll keep using the classic way at the moment <i class="fas fa-bed-alt"></i> as long as it works fine.

I hope MDB will soon support FontAwesome Pro !


Please insert min. 20 characters.
Status

Answered

Specification of the issue
  • User: Pro
  • Premium support: No
  • Technology: Angular
  • MDB Version: 8.8.2
  • Device: pc
  • Browser: Chrome
  • OS: Windows 10
  • Provided sample code: No
  • Provided link: No