rmastro
November 30, 2022, 7:32pm
1
Not sure why this div with id of “icon” is not visible, below is my code. I’d appreciate any assistance - thank you.
<div id="icon">
<a href="./about.html">
<i class="fas fa-info-circle" style="font-size:36px"></i>
</a>
</div>
* {
padding: 0;
margin: 0;
box-sizing: border-box;
}
h1 {
font-size: 100px;
}
h4 {
font-size: 30px;
}
body {
background-color: #000;
}
.product-card {
z-index: 9;
display: flex;
flex-wrap: wrap;
}
.product {
z-index: 9;
width: 50%;
}
#black-tee,
#white-tee,
#white-text-sticker,
#black-text-sticker {
width: calc(100% - (20px * 2));
margin: 20px;
}
#image-container {
position: relative;
}
#icon {
z-index: 999;
text-align: center;
margin-top: -30px;
margin-bottom: 30px;
}
.fa-info-circle {
color: #fff;
font-size: 30px;
}
You have defined a class .fa-info-circle in CSS, but also have added a style property and value in ‘i’ element. The following code works:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css">
</head>
<body>
<i class="fa fa-info-circle"></i>
</body>
</html>
rmastro
November 30, 2022, 8:43pm
3
I appreciate your reply.
I have removed the style property from the element, but it still isn’t working for me.
Can you post here your complete Html code?
rmastro
November 30, 2022, 8:56pm
5
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="./style.css">
<link rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<title></title>
</head>
<body>
<div id="image-container">
<img class="image" src="./imgs/max-bohme-Skhc2Bm7J4s-unsplash.jpg">
<img class="image"
src="./imgs/gabe-pierce-SgXWBOLUNAk-unsplash.jpg">
<img class="image"
src="./imgs/chitto-cancio-i02U7tjG0SI-unsplash.jpg">
<img class="image"
src="./imgs/ahmet-demiroglu-lgn2bC6gTn8-unsplash.jpg">
<img class="image"
src="./imgs/eleni-afiontzi-uSvtnSWDGmw-unsplash.jpg">
</div>
<div class="product-card">
<div class="product">
<a>
<img id="black-tee"
src="./imgs/LDM-black-tee-transparent.png">
</a>
</div>
<div class="product">
<a>
<img id="white-tee"
src="./imgs/LDM-white-tee-transparent.png">
</a>
</div>
<div class="product">
<a>
<img id="white-text-sticker"
src="./imgs/white text sticker front copy.png">
</a>
</div>
<div class="product">
<a>
<img id="black-text-sticker"
src="./imgs/black text sticker front copy.png">
</a>
</div>
</div>
<a href="./about.html">
<i class="fas fa-info-circle"></i>
</a>
</body>
</html>
just to be clear, I do have a title in the title element and links in my anchor tags, but I have just removed them from this post. Thank you.
<i class="fa fa-info-circle"></i> ---------type in "fa" instead of "fas"
Info icon got from your code!
rmastro
November 30, 2022, 9:22pm
7
I’m still having an issue with it not appearing. I can see the element when I inspect it (tried safari, chrome, and firefox) but not the icon itself. I wonder if it’s because of my image container?
In the ‘image-container,’ your ‘img’ elements have a lot of blank spaces between the ‘class’ and ‘src’ attributes. The same is true for the ‘link’ element (font-awesome). I suppose you put a declaration at the top of the HTML code <!DOCTYPE html>
At the moment I can not see any other possibility. From my side the icon is visible.
rmastro
November 30, 2022, 9:42pm
9
My code is automatically formatted on save, so I may remove that extension and manually format to remove those spaces.
I do have the declaration at the top.
I’ll keep messing around with this tonight.
I appreciate your assistance!
system
Closed
June 1, 2023, 9:43am
10
This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.