could anyone let me know what's wrong and cart icon is not displayed?
`<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">
<title>Website</title>
<link rel="stylesheet" href="" class="rel">
<link rel="stylesheet" href="https://pro.fontawesome.com/releases/v5.10.0/css/all.css" />
</head>
<body>
<secton id="header">
<img src="/logo.png" class="logo" alt="">
<div>
<ul id="navbar">
<li>Home</li>
<li>Shop</li>
<li>Blog</li>
<li>About</li>
<li>Contact</li>
<li><i class="fa-solid fa-bag-shopping"></i></li>
</ul>
</div>
</secton>
<script src="script.js"></script>
</body>
Tried different icons and it's not working anyway..
You need to use the proper class names
.fas not .fa-solid
.fa-bags-shopping, .fa-shopping-bag, .fa-shopping-cart, or .fa-shopping-basket not .fa-bag-shopping
<link rel="stylesheet" href="https://pro.fontawesome.com/releases/v5.10.0/css/all.css" />
<i class="fas fa-bags-shopping"></i>
<i class="fas fa-shopping-bag"></i>
<i class="fas fa-shopping-cart"></i>
<i class="fas fa-shopping-basket"></i>
Related
I have encountered this weird event when creating social media icons.
My original code is:
<!DOCTYPE html>
<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="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.2.1/css/all.min.css"
integrity="sha512-MV7K8+y+gLIBoVD59lQIYicR65iaqukzvf/nwasF0nqhPay5w/9lJmVM2hMDcnK1OnMGCdVK+iQrJ7lzPJQd1w=="
crossorigin="anonymous" referrerpolicy="no-referrer" />
<title>Document</title>
</head>
<body>
<h3>Follow Us</h3>
<div class="socials-container">
<i class="fab fa-facebook"></i>
<i class="fab fa-youtube"></i>
<i class="fab fa-instagram"></i>
</div>
</body>
</html>
At first the icons inside the "socials-container" div did not appear. But they showed up when I removed the container.
<!DOCTYPE html>
<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="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.2.1/css/all.min.css"
integrity="sha512-MV7K8+y+gLIBoVD59lQIYicR65iaqukzvf/nwasF0nqhPay5w/9lJmVM2hMDcnK1OnMGCdVK+iQrJ7lzPJQd1w=="
crossorigin="anonymous" referrerpolicy="no-referrer" />
<title>Document</title>
</head>
<body>
<h3>Follow Us</h3>
<i class="fab fa-facebook"></i>
<i class="fab fa-youtube"></i>
<i class="fab fa-instagram"></i>
</body>
</html>
Then I tried to rename the div's class to something like "social-container" (without the 's') the icons showed up.
<!DOCTYPE html>
<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="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.2.1/css/all.min.css"
integrity="sha512-MV7K8+y+gLIBoVD59lQIYicR65iaqukzvf/nwasF0nqhPay5w/9lJmVM2hMDcnK1OnMGCdVK+iQrJ7lzPJQd1w=="
crossorigin="anonymous" referrerpolicy="no-referrer" />
<title>Document</title>
</head>
<body>
<h3>Follow Us</h3>
<div class="social-container">
<i class="fab fa-facebook"></i>
<i class="fab fa-youtube"></i>
<i class="fab fa-instagram"></i>
</div>
</body>
</html>
Does HTML have rules for class names that I don't know? Why is a specific class name causing children to not appear as usual?
<!DOCTYPE html>
<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" />
<title>WEbsite</title>
<link rel="stylesheet" href="css/style.css" />
<link
rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.1.0/css/all.min.css"
/>
</head>
<body>
<header class="header">
<nav class="nav-bar">
<i class="fa-regular fa-house"></i> <span>home</span>
</nav>
</header>
</body>
</html>
Unable to load home icon in html code using font-awesome. In place of home icon, browser showing a cross icon. Kindly, tell me what's wrong with the code?
Use fa-solid instead of regular.
<!DOCTYPE html>
<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" />
<title>WEbsite</title>
<link rel="stylesheet" href="css/style.css" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.1.0/css/all.min.css" />
</head>
<body>
<header class="header">
<nav class="nav-bar">
<i class="fa-solid fa-house"></i> <span>home</span>
</nav>
</header>
</body>
</html>
The Fontawesome icon is loaded fine, but you're using the wrong classes.
Replace
<i class="fa-regular fa-house"></i>
to
<i class="fa fa-house"></i>
I did the exact required steps in the website and still it doesn't work..
<script src="https://use.fontawesome.com/3e91539bf3.js"></script>
<div class="navbar">
<i class="fas fa-user-friends"></i>About Me
<i class="fas fa-person-booth"></i>My Builds
<i class="fas fa-clock"></i>Get in-touch
</div>
give this a try it should work .
<script src="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.13.1/js/all.min.js"></script>
I can say that's because of the version mismatch, you can try font awesome 4.7 as it is included in bootstrap cdn.
Copy to the head of html
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous">
Example:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=">
<title></title>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous">
</head>
<body>
<i class="fa fa-5x fa-cog fa-fw" aria-hidden="true"></i>
<i class="fa fa-camera-retro fa-5x"></i>
</body>
</html>
Problem:
Fitting five links inside a navigation using Materialize CSS. Right now, three links fit and I can even add a fourth. But when I add five links in total, the last two break.
Minimal Working Example (MWE):
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1.0">
<title>Materialize</title>
<!-- CSS -->
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<link href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.98.1/css/materialize.min.css" rel="stylesheet">
</head>
<body>
<header>
<nav class="indigo" role="navigation">
<div class="nav-wrapper container">
<a id="logo-container" href="#" class="brand-logo"><i class="material-icons md-36">flight_takeoff</i> Logo</a>
<ul class="right hide-on-med-and-down">
<li class="active">Home</li>
<li>About</li>
<li><a href="javascript:void(0)">Contact</li>
<li><i class="material-icons left">add_circle</i> Registration</li>
<li><i class="material-icons left">account_circle</i> Login</li>
</ul>
</div>
</nav>
</header>
</body>
</html>
Desired output:
To get all five links to fit inside the navigation on the right side.
It's because your <a href="#">Contact is missing the close tag.
Here's the updated code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1.0">
<title>Materialize</title>
<!-- CSS -->
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<link href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.98.1/css/materialize.min.css" rel="stylesheet">
</head>
<body>
<header>
<nav class="indigo" role="navigation">
<div class="nav-wrapper container">
<a id="logo-container" href="#" class="brand-logo"><i class="material-icons md-36">flight_takeoff</i> Logo</a>
<ul class="right hide-on-med-and-down">
<li class="active">Home</li>
<li>About</li>
<li>Contact</li> <!-- Note the </a> closing tag -->
<li><i class="material-icons left">add_circle</i> Registration</li>
<li><i class="material-icons left">account_circle</i> Login</li>
</ul>
</div>
</nav>
</header>
</body>
</html>
I have linked it correctly adding "http:" before the link since I am using a localHost
<head runat="server">
<title>Brave Watches</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link href ="CSS/bootstrap.min.css" rel ="stylesheet" />
<link href="http://maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet"/>
<link href ="CSS/custom.css" rel ="stylesheet" />
<link href ="JavaScript/Custom.js" rel="" />
<link rel="stylesheet" type="text/css" href="Cartfiles/assets/css/bootstrap.min.css"/>
<link rel="stylesheet" type="text/css" href="Cartfiles/assets/css/custom.css"/>
<head/>
And I have added fa before fa-"icon"
<div class ="navbar navbar-inverse navbar-fixed-bottom" role="navigation">
<div class="container">
<div class="navbar-text pull-left">
<i class="fa fa-twitter"></i>
<i class="fa fa-facebook"></i>
<i class="fa fa-instagram"></i>
</div>
Still don't understand why it is giving me the blank rectangles.
Thanks in advance!