- In PG I added social media icons to my footer, but can’t get them to show. What to do?
- In VSC using PG Live ext, in Chrome dev tools> source I get
element.style spanwhich I gather is a Chrome style. How do I get rid ofelement.style?
Weird, I commented my footer out then uncommented and the span style disappeared. I’m guessing it is a glitch between PG & VSC.
I don’t understand what you’re doing, but that element.style is indicating that the “style” attribute has been added to that particular html element.
In Pinegrow, open the Design panel and check what you’ve done.
I think there’s a “background” rule that overrides the other one, which is why you’re not displaying the icons. I am not sure, without looking at the design it is a little difficult for me to figure out the cause of the problem.
1 Like
Any idea of the problem? Here is the html for the social media icons without the rest of the code.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.2/css/brands.min.css" integrity="sha512-W/zrbCncQnky/EzL+/AYwTtosvrM+YG/V6piQLSe2HuKS6cmbw89kjYkp3tWFn1dkWV7L1ruvJyKbLz73Vlgfg==" crossorigin="anonymous" referrerpolicy="no-referrer" />
<link rel="stylesheet" href="css/footer.css">
<title>Footer</title>
</head>
<body>
<footer>
<div class="social">
<a href="https://twitter.com/kathmc" target="_blank"><i class="fa-brands fa-square-twitter" style="font-size: 36px;"></i></a>
<a href="https://www.facebook.com/katmc1" target="_blank"><i class="fa-facebook-square fab" style="font-size: 36px;"></i></a>
<a href="https://www.linkedin.com/in/katmc/" target="_blank"><i class="fa-linkedin fab" style="font-size: 36px;"></i></a>
<a href="https://www.instagram.com/kat12n/" target="_blank" style="font-size: 36px;"><i class="fab fa-instagram-square"></i></a>
</div>
</footer>
</body>
</html>
footer.css below
/* Footer > social media icons*/
.social {
border: 3px red solid;
height: 3rem;
display: flex;
justify-content: center;
}
Screenshot of what I get:
Made a fast Prototype in Pinegrow Bootstrap 5.
This will work.
Your Font Awsome link, HTML and CSS is wrong! I corrected it. Did not use any Bootstrap inline classes you can use this in any design but you have to refine your CSS!
Regards,
David
Click on the image to enlarge and see!
<title>Blank Template for Bootstrap</title>
<!-- Bootstrap core CSS -->
<link href="bootstrap/css/bootstrap.min.css" rel="stylesheet">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.2/css/all.min.css" />
<!-- Custom styles for this template -->
<link href="style.css" rel="stylesheet">
<style>
.social {
list-style: none;
height: 3rem;
display: flex;
justify-content: center;
}
.social a {
margin-right: 5px;
}
</style>
</head>
<body>
<div class="container">
<footer>
<ul class="social">
<li> <a href="https://twitter.com/kathmc" target="_blank"><i class="fa-brands fa-square-twitter" style="font-size: 36px;"></i></a></li>
<li> <a href="https://www.facebook.com/katmc1" target="_blank"><i class="fa-facebook-square fab" style="font-size: 36px;"></i></a></li>
<li> <a href="https://www.linkedin.com/in/katmc/" target="_blank"><i class="fa-linkedin fab" style="font-size: 36px;"></i></a></li>
<li> <a href="https://www.instagram.com/kat12n/" target="_blank"><i class="fab fa-instagram-square" style="font-size: 36px;"></i></a></li>
</ul>
</footer>
</div>
<!-- Bootstrap core JavaScript
================================================== -->
<!-- Placed at the end of the document so the pages load faster -->
<script src="assets/js/popper.min.js"></script>
<script src="bootstrap/js/bootstrap.min.js"></script>
</body>
</html>
1 Like
This is great. I’ll give it a shot.
I’ve quit using frameworks. They have a ton of unused code, take a ton of time to prune, and take too much load time.
Kat
It worked. Thanks so much.
Frameworks only work sufficient when you study the documentation and know how to work with SCSS.
When you just add some links and go for it, that’s not how you should use them!
Good Luck!
2 Likes