Why icons doesn't appear in IOS

Sydney
#1

Hi,

I have my page in www.ltg.fi

Everything seem to be fine when I go to page with my laptop (windows) and phone (Android). When I go to my front page using my Ipad, site “origin features’” icons doesn’t appear but only their containers.

Why’s that and how I can make my page IOS friendly?

Best regards
Mikko from Finland

#2

Hello there,

Could you please confirm if you have been running the latest version of Page Builder and SiteOrigin Widgets Bundle plugins?

Regards,
Kharis

#3

Hi,

I updated those yesterday.

BR.

Mikko

#4

Hi Mikko,

I don’t think if this is a theme-related issue. Do you have other active plugins? One of theme might prevent the icons to be displayed on mobile. Please try to temporarily disable all of your other plugins except Page Builder, Widgets Bundle and Sydney Toolbox.

Let me know how it goes.

Regards,
Kharis

#5

Hi,

I deactivated the plugins and it didn’t work. I have quite few plugins outside theme (google analytics counter, akismet, contact form 7).

I lately changed my page from http: to https: . Can that affect to icons? I have tried to rebuild the icons but it didn’t work.

I also changed the one icon colour from white to red, and you can see that the icon appears outside of container in IOS. You can check it.

Regards

Mikko

#6

Hi,

Do you have other ideas how to fix this?
Do you have IOS to test how does it look in your end? I have only one IOS, so I’m not sure does this problem exist at all.

Best Regards

Mikko

#7

It seems likely there is a minor CSS issue. Please try adding the belo CSS code to Appearance > Customize > Additional CSS from your site dashboard.


.sow-features-list .sow-features-feature .sow-icon-fontawesome {
  top: 50% !important;
  margin-top: -12px !important;
}

Let me know how it resolves this issue.

Regards,
Kharis

#8

Hi,

Now my Lenovo shows that the icons are in wrong place. Earlier I tested site with my friends Mac, it looked ok. Maybe the problem appears only in my Ipad (if yes, thats ok.)?

Mikko

#9

Hello Mikko,

Probably it only appears on Safari mobile browser. I visited your site with my iPhone’s Safari and I can find the issue also appears on here. The below CSS code might fix it.


.sow-features-list .sow-features-feature .sow-icon-fontawesome {
  left: 0;
  line-height: 84px;
}

Please give it a try and let me know how it goes.

Regards,
Kharis

#10

Hi,

It works! Thank you Kharis and have a nice day!

Best Regards
Mikko