I made this website as part of the Odin Project curriculum and for some reason the social media icons (Facebook, Twitter, and Instagram) are showing on Chrome but not on Safari.
I tried to clear the cache and history on Safari.
Can anyone point out the compatibility issue and how to fix it?
Thank you.
I took the HTML from the website and made it into a snippet to test (with full URLs) Please try it and let me know what you see- it shows the icons on my Safari (on iPad IOS), though they are slightly overlapping each other.
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Resturant</title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://oasaleh.github.io/restaurant/index.css">
<link rel="icon" href="https://oasaleh.github.io/restaurant/resources/tabIcon.png">
</head>
<body>
<div id="content">
<section id="header" class="undefined">
<header id="title-bar" class="undefined">
<p id="undefined" class="title">Halal Guys</p>
</header>
</section>
<div id="nav-bar" class="undefined"><button id="Menu" class="nav bar item" href="">Menu</button><button id="Catering" class="nav bar item" href="">Catering</button><button id="ContactUs" class="nav bar item" href="">Contact Us</button></div>
<div id="contentWindow" class="undefined">
<ul id="menu" class="undefined">
<li class="menu item">
<p class="menu item name">Beef Gyro Platter</p> <img class="menu item photo" src="https://oasaleh.github.io/restaurant/resources/photos/food/beef-gyro-platter-530x530.jpeg"> </li>
<li class="menu item">
<p class="menu item name">Chicken Gyro Platter</p> <img class="menu item photo" src="https://oasaleh.github.io/restaurant/resources/photos/food/chicken-platter-530x530.jpeg"> </li>
<li class="menu item">
<p class="menu item name">Combo Platter</p> <img class="menu item photo" src="https://oasaleh.github.io/restaurant/resources/photos/food/combo-platter-530x530.jpeg"> </li>
<li class="menu item">
<p class="menu item name">Falafel Platter</p> <img class="menu item photo" src="https://oasaleh.github.io/restaurant/resources/photos/food/falafel-platter-530x530.jpeg"> </li>
</ul>
</div>
<footer id="footerSection" class="undefined">
<section id="socialMediaContact" class="undefined">
<ul class="socialmedia list">
<li class="socialmedia item"> <img class="social icon" id="iconFacebook" src="https://oasaleh.github.io/restaurant/resources/photos/icons/facebook-icon.svg"> </li>
<li class="socialmedia item"> <img class="social icon" id="iconTwitter" src="https://oasaleh.github.io/restaurant/resources/photos/icons/twitter-icon.svg"> </li>
<li class="socialmedia item"> <img class="social icon" id="iconInstagram" src="https://oasaleh.github.io/restaurant/resources/photos/icons/instagram-icon.svg"> </li>
</ul>
</section>
<section id="rights" class="undefined">
<div>
<p>All Rights Reserved 2021</p>
</div>
</section>
</footer>
</div>
<!-- <script src="https://oasaleh.github.io/restaurant/main.js"></script> -->
</body>
</html>However, the actual website shows nothing and on inspection I see there is a main.js script. What does this do? It looks at first glance as though it has the HTML for the page in it. I suspect, but do not know, that this is overwriting the actual HTML in the page in some way.
Suggestion: try the page without this main.js and see what happens. Then investigate what this main.js is doing and why you have put it there
You can replace img tag with object tag like this.
<img src="instagram-icon.svg">
with
<object data="instagram-icon.svg" type="image/svg+xml"></object>
Try this code and if it doesn't work, let me know.
I'd like to thank every one who chimed in and helped! However, the issue was my AdBlocker! It was removing social media icons!