Icons issue in Chrome and Safari.

Hi!

I have a website: https://www.directsupplyservices.com

The issue is: when I view my website in "Safari" - the phone and email icon in the header is showing. But when I view the website in "Chrome" and "Firefox" - the icons show show, instead I see a box.

Here's the screenshot for the reference:

With Icons: Safari


Without Icons: Chrome & Firefox


Kindly advise, how to solve this issue.
Thanks & Regards!

 

Shows fine for me in Chrome and FF.

 

I am wondering why it’s not working on my end. I have cleared the caches, cookies etc as well. Still no change in Chrome and Firefox. I tried in another laptop as well. Showing the same!

 

You have not defined the "tel:" and "mailto:" entities in your browser so the browser is throwing up default icons instead. Note that I said BROWSER and not WEBPAGE.

Be aware that NO MATTER WHAT YOU DO, if those entities are not defined in the viewer's browser, he will see the same default icons, even if you do not.

 

I see. Actually, the icons were showing earlier. I am working on this site since last year and the icons were showing, it’s just since last 1-2 months - there has been this error with icons.

So, how can I define “tel:” and “mailto;” entities in my browser?!

 

I have no idea, but since this is a very common problem, someone must know.

 

Oh! Okay. Hopefully someone can help with this issue.

 

The range from uE000 to uF8FF inclusive are designated as "private use". Unless you can control the character glyph sets and browsers in use, you should likely avoid their use. There are standardized glyphs such as u260E, ☎, and u2709, ✉. Not as cute, but more likely to exist in various browsers and font sets.

gary

 

Hi Gary!
I apologize, but am not really understanding how to solve this issue. Kindly explain a little of what needs to be done in order to solve this icons issue.

I would highly appreciate though.
Thanks!

 

I seem to have misled you or more likely, I misled myself. The little boxes told me the issue was with the font rendering. I went back after the latest comments to look at the source and see you are using scaled vector graphics which are an xml format. My bad.

To use standard text glyphs, replace the img element with the appropriate character, e.g.

<a rel="mailto:enquiry@xxx.com">&#9993; enquiry@xxx.com</a>

Code (markup):

Or, convert the svg images to bitmap images such as gif and replace the svg, e.g.

<a rel="tel:+971###">
  <img src="https://www.directsupplyservices.com/wp-content/plugins/speed-contact-bar/public/assets/images/phone_bright.gif"
       alt="Phone icon"
       width="30"
       height="30">
  +971-###</a>

Code (markup):

gary

 

Hello Gary!

It's completely alright. However, I still have one more question: I am using the Wordpress theme and I have never edited any file there. So please guide, which file am I supposed to add this if I used the second option?

Thanks!

 

Part of your website has no SSL. Here: You don't see icons.
http://www.directsupplyservices.com/gas-detection/portable-gas-detectors/

But here you can see icons.
https://www.directsupplyservices.com/gas-detection/portable-gas-detectors/

Make sure every page has SSL (htpps).

You can do it by editing .htaccess file.

 

Hi there!

I fixed it. Finally. You were right, part of the website had no SSL.
Thank you so much for providing your help.

Kind Regards!
Rashida H.

 

Good catch, and something that wouldn't even be a problem if the train wreck laundry-list of how NOT to build a website that is turdpress wasn't taking a dump all over their page. .. in this case slapping absolute instead of relative URI's onto everything; not only wasting bandwidth, but

Though here Chrome/Vivaldi is redirecting (301) to the https, whilst Firefox is not. That's... strange.

In general though that whole site needs a redo throwing 80%+ of the markup in the trash. What with the dozens of separate CSS and scripting files introducing half a minute of latency even on my fiber connect (love that 50 second cache-empty page-load -- NOT), endless static style and scripting in the markup, sending the CSS to all media targets, endless pointless DIV for nothing, endless pointless classes for nothing, little to nothing remotely approaching semantic markup, an inaccessible and broken document structure, gibberish use of numbered headings, and an overall failure to meet the most basic of accessibility norms. All this combines to result in using five to ten times the HTML needed to do the job, reeking badly of the developer ignorance and incompetence so common to turdpress installations and off the shelf templates.

With a home page coming in at 50k of markup, an absurd 500k if JavaScript spanning an agonizing 28 separate files on a site that doesn't even look like it does anything to warrant the presence of JavaScript, and an utterly batshit insane 550k in 35 files of CSS all to deliver a mere 804 BYTES of plaintext and zero content images, you've got bigger problems then "my icons aren't showing". That's not even 5k of HTML's flipping job,l and it's doubtful the ENTIRE site should even be using more than 32k in ONE FILE for the stylesheet given its current appearance... again, I'm not even seeing it do anything that should need / use JavaScript, but if there is some functionality I'm not seeing that too probably doesn't need more than 48k of code.

Basically you've got turdpress squeezing out of its bowels a megabyte in 73 separate files, doing the job of 96k or less in 3 files. OF COURSE it has problems.

But again, entirely what I expect from the sleazy dirtbag nube predator SCAM that is turdpress. Cute toy for making blogs for grandma, has ZERO business being used for any legitimate business.