Fontawesome not working with Admin Template

Topic: Fontawesome not working with Admin Template

BizRTC pro asked 5 years 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-->

Add comment

Marta Wierzbicka staff answered 5 years ago

0 0 Best answer

Hi,

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

Best,

Marta

Add comment

Piotr Glejzer staff answered 5 years ago

0 0 Best answer

Please insert min. 20 characters.

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

Add comment

Marta Wierzbicka staff answered 5 years ago

0 0 Best answer

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 5 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>

This is for using SVG in project

<p>Sure,</p><p>When I link this FontAwesome Script to my Project the problems occurs :</p><p>I have already provided the source code in my question description</p><div class="bg-white b--gray1 pv4 ph5 br3 br--top ba bw1"><div class="relative pb1"><div class="nb6"><div class="mb6"><div class="relative bg-gray8 lh-copy br3 pv3 ph3"><div class="overflow-auto code overflow-auto code gray5 pa2"><pre class="ma0"><code class="gray5 language-markup"><span class="token tag"><span class="token punctuation"><</span>script <span class="token attr-name">defer</span> <span class="token attr-name">src</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>https://use.fontawesome.com/releases/v5.6.3/js/all.js<span class="token punctuation">"</span></span> <span class="token attr-name">integrity</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>sha384-EIHISlAOj4zgYieurP0SdoiBYfGJKkgWedPHH4jCzpCXLmzVsw1ouK59MuUtP4a1<span class="token punctuation">"</span></span> <span class="token attr-name">crossorigin</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>anonymous<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token tag"><span class="token punctuation"></</span>script<span class="token punctuation">></span></span></code></pre></div><button class="button-reset w2 h2 br-100 bg-primary5 white hover-bg-primary6 absolute bottom--075 right--075 flex flex-column items-center justify-center" type="button"></button></div><div>This is for using SVG in project</div></div></div></div></div><div class="bg-gray1 b--gray1 br3 br--bottom bl br bb bw1 ph5 pv3"><div class="flex flex-row flex-nowrap items-center justify-end nr6"> </div></div>

Please insert min. 15 characters.

Add comment

Marta Wierzbicka staff answered 5 years ago

0 0 Best answer

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 5 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.

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: 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

BizRTC

Pro User 95Support score
18Questions 2Answers 2Snippets