Product Landing Page - Build a Product Landing Page

Hello,

I’m having trouble adding the Font Awesome code to my HTML. Can someone help me, it´s not working…

Not sure if it is the link on the head, not sure.

<!DOCTYPE html>
<html lang="en">
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
<head>
    
    <title>Document</title>
    <link href="https://fonts.googleapis.com/css?family=Anton%7CBaskervville%7CRaleway&display=swap" rel="stylesheet">
    <link rel="stylesheet" href="stylesheet.css">
    <link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Barlow+Semi+Condensed&display=swap" rel="stylesheet">
</head>

/* code using the icons*/

<div class="icon-grid">
                <i class="fa-solid fa-hand-fist" style="color: #6554af;"></i>
            </div>
            <div class="text-grid">
                <h2>Support</h2>
                <p>You can support all female and non-tradicional gender Magazines all over the world!</p>
            </div>

Please Describe what’s the issue

the link to use Fonts Awsome, it’s not working, here what I did. I’m not sure if this is the right link to use Fonts awsome icons on my HTML.

The icons are not showing when I use the code for them

<link href="https://fonts.googleapis.com/css?family=Anton%7CBaskervville%7CRaleway&display=swap" rel="stylesheet">

/*code for the icons*/
  <div class="icon-grid">
                <i class="fa-solid fa-hand-fist" style="color: #6554af;"></i>
            </div>

first make a body tag in your code

I already have the body, I can post my full code here.

<!DOCTYPE html>
<html lang="en">
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
<head>
    
    <title>Document</title>
    <link href="https://fonts.googleapis.com/css?family=Anton%7CBaskervville%7CRaleway&display=swap" rel="stylesheet">
    <link rel="stylesheet" href="stylesheet.css">
    <link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Barlow+Semi+Condensed&display=swap" rel="stylesheet">
</head>
<body>
    <div class="container-navbar">
        <header id="header">
        <nav id="nav-bar">
            <ul class="navbar-list">
                <li class="navbar-link"><a class="nav-link" href="#start">Start</a></li>
                <li class="navbar-link"><a class="nav-link" href="#magazines">Magazines</a></li>
                <li class="navbar-link"><a class="nav-link" href="#prices">Prices</a></li>
            </ul>
        </nav>
        <div class="logo">
            <img id="header-img" src="Images/Empowerful_Reading_logo-removebg-preview.png" alt="logo-empowerful-reading">
        </div>
    </header>
    </div>
    <div class="subscribe">
        <section class="subscribe-section">
            <h1 id="h1-subscribe">Be awere. Be Informed. Be Bold</h1>
            <p id="p-subscribe">Support and subscribe</p>
            <div class="container-form">
            <form id="form"  action="https://www.freecodecamp.com/email-submit">
                <input id="email" name="email" type="email" placeholder="Your email..." required>
                <input id="submit" type="submit" value="Let's go!" class="btn-email">
            </form>
        </div>
        </section>
    </div>
    <div class="cointainer-body">
        <section id="start">
            <div class="icon-grid">
                <i class="fa-solid fa-hand-fist" style="color: #6554af;"></i>
            </div>
            <div class="text-grid">
                <h2>Support</h2>
                <p>You can support all female and non-tradicional gender Magazines all over the world!</p>
            </div>
            <div class="icon-grid">
                <i class="fa-solid fa-hand-fist" style="color: #6554af;"></i>
            </div>
            <div class="text-grid">
                <h2>Magazines</h2>
                <p>You can subscribe to receive 1 or more magazines.</p>
            </div>
        </section>
        <div class="icon-grid">
            <i class="fa-solid fa-hand-fist" style="color: #6554af;"></i>
        </div>
        <div class="text-grid">
            <h2>Shipping</h2>
            <p>After fill the form we delivery at your place.</p>
        </div>
        <section id="video">

        </section>
        <section id="magazines"></section>
        <section id="prices"></section>
    </div>
    <div class="footer">
        <footer>
            <ul>
                <li>Privacy</li>
                <li>Terms</li>
                <li>Contact</li>
            </ul>
            <span>Copyright 2023, Lais Reis</span>
        </footer>
    </div>
</body>
</html>```

can you share your css Please

1 Like

I got it! Thank you, I was sice yestarday trying to get the icons. But now it’s solved !

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