1. Advertising
    y u no do it?

    Advertising (learn more)

    Advertise virtually anything here, with CPM banner ads, CPM email ads and CPC contextual links. You can target relevant areas of the site and show ads based on geographical location of the user if you wish.

    Starts at just $1 per CPM or $0.10 per CPC.

Icons issue in Chrome and Safari.

Discussion in 'HTML & Website Design' started by Rashida H., Mar 16, 2019 at 9:05 AM.

  1. #1
    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
    upload_2019-3-16_12-3-13.png

    Without Icons: Chrome & Firefox
    upload_2019-3-16_12-2-29.png
    SEMrush
    Kindly advise, how to solve this issue.
    Thanks & Regards!
     
    Rashida H., Mar 16, 2019 at 9:05 AM IP
    SEMrush
  2. qwikad.com

    qwikad.com Illustrious Member Affiliate Manager

    Messages:
    5,728
    Likes Received:
    1,063
    Best Answers:
    20
    Trophy Points:
    400
    #2
    Shows fine for me in Chrome and FF.
     
    qwikad.com, Mar 16, 2019 at 9:09 AM IP
  3. Rashida H.

    Rashida H. Peon

    Messages:
    15
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    1
    #3
    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!
     
    Rashida H., Mar 16, 2019 at 11:04 AM IP
  4. mmerlinn

    mmerlinn Notable Member

    Messages:
    2,003
    Likes Received:
    235
    Best Answers:
    6
    Trophy Points:
    240
    #4
    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.
     
    mmerlinn, Mar 16, 2019 at 11:28 AM IP
  5. Rashida H.

    Rashida H. Peon

    Messages:
    15
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    1
    #5
    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?!
     
    Rashida H., Mar 16, 2019 at 12:06 PM IP
  6. mmerlinn

    mmerlinn Notable Member

    Messages:
    2,003
    Likes Received:
    235
    Best Answers:
    6
    Trophy Points:
    240
    #6
    I have no idea, but since this is a very common problem, someone must know.
     
    mmerlinn, Mar 16, 2019 at 12:08 PM IP
  7. Rashida H.

    Rashida H. Peon

    Messages:
    15
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    1
    #7
    Oh! Okay. Hopefully someone can help with this issue.
     
    Rashida H., Mar 16, 2019 at 2:13 PM IP
  8. kk5st

    kk5st Prominent Member

    Messages:
    3,443
    Likes Received:
    355
    Best Answers:
    28
    Trophy Points:
    335
    #8
    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
     
    kk5st, Mar 17, 2019 at 8:21 AM IP
  9. Rashida H.

    Rashida H. Peon

    Messages:
    15
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    1
    #9
    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!
     
    Rashida H., Mar 17, 2019 at 6:26 PM IP
  10. kk5st

    kk5st Prominent Member

    Messages:
    3,443
    Likes Received:
    355
    Best Answers:
    28
    Trophy Points:
    335
    #10
    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
     
    kk5st, Mar 18, 2019 at 8:59 AM IP
  11. Rashida H.

    Rashida H. Peon

    Messages:
    15
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    1
    #11
    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!
     
    Rashida H., Mar 18, 2019 at 9:41 AM IP
  12. Karolwf

    Karolwf Active Member

    Messages:
    110
    Likes Received:
    23
    Best Answers:
    1
    Trophy Points:
    70
    #12
    Karolwf, Mar 18, 2019 at 3:33 PM IP
  13. Rashida H.

    Rashida H. Peon

    Messages:
    15
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    1
    #13
    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.
     
    Rashida H., Mar 18, 2019 at 4:31 PM IP
  14. deathshadow

    deathshadow Acclaimed Member

    Messages:
    8,702
    Likes Received:
    1,567
    Best Answers:
    227
    Trophy Points:
    515
    #14
    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.
     
    deathshadow, Mar 18, 2019 at 4:56 PM IP