CODEWITHSUNDEEP
cssicons
mshomali
mshomali

Reputation: 654

Font first load as text then load icon

I'm using material.io icons on a site. The first time the site is opened, the icons don't load and remain text; on all future page loads, the icons load properly.

What can I do to make the icons show up the first time?

Thanks in advance.

Upvotes: 1

Views: 1005

Answers (3)

mshomali
mshomali

Reputation: 654

I find a solution with this trick: If I write the i tag with following style:

<i class="material-icons middle comment"></i>

Then when the document is ready I fill the content of i tag. I write following jQuery code:

jQuery( document ).ready(function() {
    jQuery('i.person').html("comment");
});

Upvotes: 0

Ramesh
Ramesh

Reputation: 2403

Write your jquery inside 

$( document ).ready(function() {
   //your code comes here
});

Code which are under $(document).ready(); will load when all the necessary actions are completed on page.

Upvotes: 1

Ben
Ben

Reputation: 47

this situation happened when the css of material.io is loading ! you can use svg for important icon it's make load faster and for another icon use material.io

or use jQuery HTML method to show icons after the document load completely exmaple for : 

<i class="material-icons">&#xE87C;</i>

$( document ).ready(function() {
  $('i.material-icons').html("&#xE87C;");
});

Upvotes: 1

Related Questions