Suggestion: Support for Font Awesome Pro

Topic: Suggestion: Support for Font Awesome Pro

tommykjensen free asked 4 years 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).

Add comment

Arkadiusz Idzikowski staff answered 4 years ago

0 0 Best answer

Please insert min. 20 characters.

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 free commented 4 years 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!

Hello,

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

angular.json

<pre class="prettyprint"><code>"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"
 ]
</code></pre>

(npm install of FontAwesome pro worked successfully)

Icon used for the example : bed-alt (<a href="https://fontawesome.com/icons/bed-alt?style=solid" target="_blank" rel="nofollow">https://fontawesome.com/icons/bed-alt?style=solid</a>)

Examples i've tried...

<pre class="prettyprint"><code><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

//Working
</code></pre>

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

Please insert min. 15 characters.

Arkadiusz Idzikowski staff commented 4 years 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 free commented 4 years 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  as long as it works fine.

I hope MDB will soon support FontAwesome Pro !

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: 8.8.2
Device: pc
Browser: Chrome
OS: Windows 10
Provided sample code: No
Provided link: No

tommykjensen

150Support score
12Questions 8Answers 0Snippets