Fontawesome not working with Admin Template


Topic: Fontawesome not working with Admin Template

BizRTC pro premium asked 6 months ago

Hi,

I am trying to use SVG Icons with Admin Template, but When I attach the scripts and css for FontAwesome 5 with SVG it does not look good. 

It looks like this without SVG :

Without SVG

 

When SVG is CSS and JS are added it looks like this :

 

Issue

 

My Code is as below:

 

<!--Grid column-->
<div class="col-xl-3 col-md-6 mb-4">

<!--Card-->
<div class="card card-cascade cascading-admin-card">

<!--Card Data-->
<div class="admin-up">
<i class="fas fa-headset light-green lighten-1"></i>
<div class="data">
<p>TRAFFIC</p>
<h4 class="font-weight-bold dark-grey-text">20000</h4>
</div>
</div>
<!--/.Card Data-->

<!--Card content-->
<div class="card-body card-body-cascade">

<!--Text-->
<p class="card-text">Worse than last week (75%)</p>
</div>
<!--/.Card content-->

</div>
<!--/.Card-->

</div>
<!--Grid column-->

Marta Szymanska staff answered 6 months ago

Hi,

do you use Admin Dashboard Template? Because these icons work, but these admin cards need custom code which is included only in Admin Dashboard Template and nowhere else.

Best,

Marta


BizRTC pro premium commented 6 months ago

Yes Marta, I have bought Big Bundle and I have both MDB Pro and Admin Material Dashboard. The icons are also showing fine, the problem occurs only when I use SVG Icons.


Marta Szymanska staff answered 6 months ago

Hi,

okay, what SVG icons you want to use? Could you provide any source? Our main icons source is Font Awesome and we do not guarantee the correct operation of other icons.

Best,

Marta


BizRTC pro premium commented 6 months ago

Sure,

When I link this FontAwesome Script to my Project the problems occurs :

I have already provided the source code in my question description

<script defer src="https://use.fontawesome.com/releases/v5.6.3/js/all.js" integrity="sha384-EIHISlAOj4zgYieurP0SdoiBYfGJKkgWedPHH4jCzpCXLmzVsw1ouK59MuUtP4a1" crossorigin="anonymous"></script>
This is for using SVG in project
 

Piotr Glejzer staff answered 6 months ago

Hi,

the main problem with your code is the fact that we are not using SVG to create our projects and only just simple CSS code from FA5. If you want to use SVG in our projects you have to do some hacks about that because JavaScript from FA5 is mixing about classes in HTML and It's not look good because JS is removing these classes all the more your project is not getting CSS styles. 

When you are using SVG it automatically created SVG with PATH and some 'data' attributes and removed dynamically all 'fas, fab, far' classes from HTML and changed it to dependency with JS. 

So you have to change every 'fas, fab, far' classes in your SCSS/CSS code to your custom classes, for example, change these classes for 'faz' and add this custom class to your  <i> tags where you are using FA5..

For an example:

<i class="fas fa-camera faz"></i> 

Best,

Piotr


Marta Szymanska staff answered 6 months ago

Hi,

would you provide any link to the project? Because I'm still not sure how I can help you?

Best,

Marta


Please insert min. 20 characters.
Status

Answered

Specification of the issue
  • User: Pro
  • Premium support: Yes
  • Technology: jQuery
  • MDB Version: 4.5.15
  • Device: Windows
  • Browser: Chrome
  • OS: Windows
  • Provided sample code: Yes
  • Provided link: No