Show an icon

HTML & CSS
1

Good morning,

My phone icon is not visible even though I have declared the kit and the line of code in the head

Do you have an idea?

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Travel .</title>
    <link rel="stylesheet" href="style.css">
    <script src="https://kit.fontawesome.com/236c56896e.js" crossorigin="anonymous"></script>
</head>

<body>

    <header>
        <div class="logo-div">
            <div class="logo">
                <p>Travel<span>.</span></p>
            </div>
        </div>
        <ul>
            <li><a href="#">Home</a></li>
            <li><a href="#">Destinations</a></li>
            <li><a href="#">Pricing</a></li>
            <li><a href="#">Reviews</a></li>
        </ul>

        <div class="btn-header">
            <button class="btn">
                <i class="fa-solid fa-phone"></i>
                <span>RĂ©server</span>
            </button>
        </div>
    </header>

</body>

</html>
2

I cannot access the .js file. I guess it is only available when the web page is uploaded to your domain.

An alternative is to use an SVG:

<button class="btn">
  <svg xmlns="http://www.w3.org/2000/svg" viewbox="0 0 100 100">
    <path d="M34 47 Q41 59 52 66 L59 60 Q61 58 63 59 69 61 76 61 81 61 81 65 L81 79 Q81 83 76 83 16 83 16 23 16 19 20 19 L35 19 Q38 19 38 23 38 29 40 35 41 38 40 40" fill="green" />
  </svg>
  RĂ©server
</button>
1 Like
3

normally it should work with .js like that?

4

Yes, it should work but only when uploaded to the domain that you specified when you set up your account at Font Awesome.

It’s working here (on free webspace):
http://create.mywebcommunity.org/cdev1.html

1 Like