Jump to content
Steve Webb

Icon fonts changing on page load

Recommended Posts

Steve Webb+    1
Steve Webb

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
Danny    1,327
Danny

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>


Please search our forums, before posting!

Share this post


Link to post
Share on other sites
Steve Webb+    1
Steve Webb

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
Danny    1,327
Danny

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.


Please search our forums, before posting!

Share this post


Link to post
Share on other sites
Steve Webb+    1
Steve Webb

Hi.

I have identified the issue as a plugin conflict.

Thanks for your help!

Share this post


Link to post
Share on other sites
Danny    1,327
Danny

Which plugin?

 

Also happy to hear the issue has been resolved.


Please search our forums, before posting!

Share this post


Link to post
Share on other sites
Steve Webb+    1
Steve Webb

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
Danny    1,327
Danny

OK, thanks for informing us, we appreciate it.


Please search our forums, before posting!

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now


  • Similar Content

    • gregbroxton
      By gregbroxton+
      The Font Awesome 'Brand icons' do not render on the mobile version of this site.
      The other Font Awesome icons render fine, but the "Brand icons" do not render at all when viewed on mobile.
      Everything works normally when viewed on the PC.
      Any ideas why the brand icons will not render in the mobile version?
      The site is using DMS2 with all updates
      gregbroxton.com
    • bartoncollege
      By bartoncollege
      I was perusing the master list of Font Awesome icons at http://fortawesome.github.io/Font-Awesome/icons/ and noticed that there are many new ones that are not available in iBox's dropdown menu.  Will these be added in the next DMS update?
      Thanks.
      Ken.
    • abuzzelli
      By abuzzelli+
      Trying to display social icons in the footer of http://brkichdesign.com/NewSite/. All are working but yelp. It's right after the pinterest icon, it's there but not showing up. Any ideas why?
    • webmktco
      By webmktco+
      Website URL: http://www.schrumpfdds.com/
      Framework Version: DMS 1.1.9
      WordPress Version: 4.1.1
       
      I noticed that the Font Awesome version in my theme is 3.2.1.
       
      Can you tell me how I can update the FA version? Or is that not possible?
    • webmktco
      By webmktco+
      I can't get the Yelp icon to display.  It seems my development site has an older version of Font Awesome (according the FA developer).
       
      How can I update FA to the most recent version?
       
      WordPress Version
      4.0.1
      Framework Version
      2.1.9.1
      PHP Version
      5.4
      http://forsythdentalpartners.myddsdev.com/  

×