Topic: Fontawesome not working with Admin Template
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 :
When SVG is CSS and JS are added it looks like this :
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-->
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 commented 6 years 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.
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 commented 6 years 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>
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
Hi,
would you provide any link to the project? Because I'm still not sure how I can help you?
Best,
Marta
FREE CONSULTATION
Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.
Answered
- User: Pro
- Premium support: No
- Technology: MDB jQuery
- MDB Version: 4.5.15
- Device: Windows
- Browser: Chrome
- OS: Windows
- Provided sample code: Yes
- Provided link: No