Archived

This topic is now archived and is closed to further replies.

  • 0

Icon fonts changing on page load


Question

Posted · Report post

When I load my page, the icons I use in the menu bar (and site-wide) start off as one icon, and when the page loads they switch to different (smaller) icons.  They are also not centered within their container.  The umbrella icon at the bottom of my page is frustratingly off to the right.  I have tried css to get it centered, but to no avail.

When the site loads and the icons get smaller, it shifts everything on the site just a little bit and it is annoying.

I have tried disabling plugins and reloading, but the icons keep switching.

You can see what I mean here: mattro.se/music/  - refresh the page to see the switch of the icons, and the shifting over to the right that I am talking about.

Any help would be super appreciated!!

Thanks in advance.

 

-m

Share this post


Link to post
Share on other sites

7 answers to this question

Posted · Report post

It was All-in-One Event Calendar by Timely

It has it own separate icon set it seems.. I have opened a ticket at Timely to see if they have a fix.

There are a few other posts on the forums over there with the same issue.. it was also the culprit behind the icons being shifted to the right.

Thanks again.

Share this post


Link to post
Share on other sites

Posted · Report post

Hi.

I have identified the issue as a plugin conflict.

Thanks for your help!

Share this post


Link to post
Share on other sites

Posted · Report post

Which plugin?

 

Also happy to hear the issue has been resolved.

Share this post


Link to post
Share on other sites

Posted · Report post

OK, thanks for informing us, we appreciate it.

Share this post


Link to post
Share on other sites

Posted · Report post

Hi,

 

I can see what is happening upon page load but I would like to know why you have used this:

 

<em class="icon-home"></em>

 

and not this:

 

<i class="icon-home"></i>

 

Try replacing the <em> with the correct formatting of <i>

Share this post


Link to post
Share on other sites

Posted · Report post

Hi Danny,

 

Thanks for the reply.

I have changed the <em> to <i> in my menu and am still getting the icon switch.

It is replacing the icons - not just shifting them

You can see on this page that the calendar icon changes to a completely new icon on load:

mattro.se/music/

I am very confused.

Share this post


Link to post
Share on other sites

Posted · Report post

Do you have the Bootstrap Icons plugin active ? If so disable it.

 

If you do not have the Bootstrap Icons plugin active, then I recommend you temporarily remove all custom CSS and see if this resolves your issue. As I have just this moment added icons to my test sites navigation and I do not have this error.

Share this post


Link to post
Share on other sites