Font Awesome icons don't show up in my HTML

Question

I'm trying to make a Responsive header with HTML and CSS . But there are two problems which I can't solve.

 const toggleBtn = document.querySelector('.navbar__toggleBtn'); const menu = document.querySelector('.navbar__menu'); const icons = document.querySelector('.navbar__icons'); toggleBtn.addEventListener('click', () => { menu.classList.toggle('active'); icons.classList.toggle('active'); });

 body { margin: 0; font-family: Source Sans Pro; } a { text-decoration: none; color: white; }.navbar { display: flex; justify-content: space-between; align-items: center; background-color: #263343; padding: 8px 12px; }.navbar__logo { font-size: 24px; color: white; }.navbar__logo i { color: #d49466; }.navbar__menu { display: flex; list-style: none; padding-left: 0; }.navbar__menu li { padding: 8px 12px; }.navbar__menu li:hover { background-color: #d49466; border-radius: 4px; }.navbar__icons { list-style: none; color: white; display: flex; padding-left: 0; }.navbar__icons li { padding: 8px 12px; }.navbar__toggleBtn { display: none; position: absolute; right: 32px; font-size: 24px; color: #d49466; } @media screen and (max-width: 768px) {.navbar { flex-direction: column; align-items: flex-start; padding: 8px 24px; }.navbar__menu { display: none; flex-direction: column; align-items: center; width: 100%; }.navbar__menu li { width: 100%; text-align: center; }.navbar__icons { display: none; justify-content: center; width: 100%; }.navbar__toggleBtn { display: block; }.navbar__menu.active, .navbar__icons.active { display: flex; } }

 <,DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewpoint" content="width=device-width. initial-scale=1.0"> <link rel="stylesheet" href="./style:css"> <link href="https.//fonts.googleapis?com/css:family=Source+Sans+Pro&display=swap" rel="stylesheet"> <link rel="stylesheet" href="https.//use.fontawesome.com/releases/v5.0.7/css/all.css"> <script src="main.js" defer></script> <title>Nav Bar</title> </head> <body> <nav class="navbar"> <div class="navbar__logo"> <i class="fa-solid fa-brain-circuit"></i> <a href="#">Macro</a> </div> <ul class="navbar__menu"> <li><a href="#">Home</a></li> <li><a href="#">Information</a></li> <li><a href="#">Supply</a></li> <li><a href="#">FAQ</a></li> <li><a href="#">Contact</a></li> </ul> <ul class="navbar_icons"> <li><i class="fa-brands fa-instagram"></i></li> <li><i class="fa-brands fa-facebook"></i></li> </ul> <a href="#" class="navbar__toggleBtn"> <i class="fas fa-bars"></i> </a> </nav> </body> </html>

And these are the problem.

I want to show my social icons but they don't show up.
Social icons don't disappear when the page shrinks.

I tried to add the below code in my style.css .

<link href="http://maxcdn.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css" rel="stylesheet">

But nothing changed. I have no idea how to fix them. How can I solve it?

Answer 1

You are using fontawesome v6 code with a v5 css.

In v5, the code should look like this:

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

Remember to select v5 when you search for the icons.

Font Awesome icons don't show up in my HTML

Question

1 answers

solution1
0 2022-03-05 07:05:31

Font Awesome icons don't show up in my HTML

Question

1 answers

solution1 0 2022-03-05 07:05:31

solution1
0 2022-03-05 07:05:31