Font awesome weird behaviour

Font awesome weird behaviour
0.0 0

#1

I have a weird problem with the social icon links in my product landing page. I removed a closing div tag which doesn’t appear to connect to anything and then all my font awesome icons in that section disappeared.

<div class="top-footer">
            <section class="socials footer-section">
                <h2>Connect</h2>
                <div class="social-icons">
                    <a href="https://twitter.com/" target="_blank">


                        <i class="fab fa-twitter"></i>


                    </a>
                    <a href="https://www.instagram.com/" target="_blank">


                        <i class="fab fa-instagram"></i>


                    </a>
                    <a href="https://www.facebook.com/" target="_blank">


                        <i class="fab fa-facebook-square"></i>


                    </a>
                    <a href="https://www.youtube.com/" target="_blank">


                        <i class="fab fa-youtube"></i>


                    </a>
                </div>
            </section>
            <section class="partners footer-section">
                <h2>Global partners</h2>
                <ul class="footer-contents">
                    <a href="#" target="_blank">
                        <li>Green-tech</li>
                    </a>
                    <a href="#" target="_blank">
                        <li>Technology global</li>
                    </a>
                    <a href="#" target="_blank">
                        <li>World tree trust</li>
                    </a>
                    <a href="#" target="_blank">
                        <li>Greener spaces</li>
                    </a>

                </ul>
            </section>
            <section class="partners footer-section">
                <h2>Careers</h2>
                <ul class="footer-contents">
                    <a href="#" target="_blank">
                        <li>Software development</li>
                    </a>
                    <a href="#" target="_blank">
                        <li>Engineering</li>
                    </a>
                    <a href="#" target="_blank">
                        <li>Botanical research</li>
                    </a>
                    <a href="#" target="_blank">
                        <li>Management and admin</li>
                    </a>

                </ul>
            </section>
            <section class="footer-section contact" id="contact">
                <h2>Get in Contact</h2>

                <form class="footer-contents" id="form" action="https://www.freecodecamp.com/email-submit">


                    <input id="name" type="text" placeholder="your name" required>


                    <input id="number" type="number" placeholder="your phone number">

                    <input type="email" name="email" id="email" placeholder="your email@mail.com" required>

                    <input id="submit" type="submit" value="Submit">
                </form>

            </section>
        **</div>**
        </div>

Full html file:
https://github.com/ozmos/product-landing-page/blob/master/index.html
Link to css:
https://github.com/ozmos/product-landing-page/blob/master/main.css


#2

I am not able to reproduce your issue when I delete the extra </div>. When I delete it, the icons still appear in the same location as before deleting it. I copied/pasted your html code and deleted the </div>.


#3

Thanks. Maybe a problem with the font awesome CDN then?


#4

I don’t think so. I used all of your code including the CDN.


#5

So my code works fine with your computer? If that’s the case it could be my laptop, live server or internet connection