Icon in div not showing - personal project

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>

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?

<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"

image
Info icon got from your code!

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.

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!

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.