Jump to content


Photo
- - - - -

Icon fonts changing on page load

icon fonts font awesome

Best Answer Matt Rose , 26 February 2013 - 09:51 AM

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.

Go to the full post


  • Please log in to reply
7 replies to this topic

#1 Matt Rose

Matt Rose

    Member

  • Members
  • 22 posts
  • LocationCANADA
  • Framework Version:Current
  • Country: Country Flag

Posted 24 February 2013 - 03:47 AM

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



#2 Danny

Danny

    Is Awesome!

  • Moderators
  • 13010 posts
  • LocationManchester, UK
  • Country: Country Flag

Posted 24 February 2013 - 09:52 AM

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>



#3 Matt Rose

Matt Rose

    Member

  • Members
  • 22 posts
  • LocationCANADA
  • Framework Version:Current
  • Country: Country Flag

Posted 25 February 2013 - 12:03 AM

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.



#4 Danny

Danny

    Is Awesome!

  • Moderators
  • 13010 posts
  • LocationManchester, UK
  • Country: Country Flag

Posted 25 February 2013 - 09:05 AM

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.



#5 Matt Rose

Matt Rose

    Member

  • Members
  • 22 posts
  • LocationCANADA
  • Framework Version:Current
  • Country: Country Flag

Posted 26 February 2013 - 08:52 AM

Hi.

I have identified the issue as a plugin conflict.

Thanks for your help!



#6 Danny

Danny

    Is Awesome!

  • Moderators
  • 13010 posts
  • LocationManchester, UK
  • Country: Country Flag

Posted 26 February 2013 - 08:53 AM

Which plugin?

 

Also happy to hear the issue has been resolved.



#7 Matt Rose

Matt Rose

    Member

  • Members
  • 22 posts
  • LocationCANADA
  • Framework Version:Current
  • Country: Country Flag

Posted 26 February 2013 - 09:51 AM   Best Answer

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.



#8 Danny

Danny

    Is Awesome!

  • Moderators
  • 13010 posts
  • LocationManchester, UK
  • Country: Country Flag

Posted 26 February 2013 - 09:54 AM

OK, thanks for informing us, we appreciate it.







Also tagged with one or more of these keywords: icon fonts, font awesome