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?
Related
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>
<!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 dont know what details do you need. Code is very simple.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</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>
<ul class="sci">
<li><i class="fab fa-facebook" aria-hidden="true"></i></li>
<li><i class="fab fa-instagram" aria-hidden="true"></i></li>
<li><i class="fab fa-vk" aria-hidden="true"></i></li>
</ul>
</body>
</html>
details details details details details details details details details
change fab to fa. you need to use font-awesome version 5 to use fab
<i class="fa fa-facebook" aria-hidden="true"></i>
or use font-awesome 5 cdn link
https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.1/css/all.min.css
fab is not included in the 4.7.0/css/font-awesome.min.css.
Consider using up-to-date 5.15.1 cdn link (provided by cdnjs.com):
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.1/css/all.min.css" rel="stylesheet"/>
<!DOCTYPE html>
<ul class="sci">
<li><i class="fab fa-facebook"></i></li>
<li><i class="fab fa-instagram" aria-hidden="true"></i></li>
<li><i class="fab fa-vk" aria-hidden="true"></i></li>
</ul>
use latest CSS and JS.
https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.1/css/all.min.css
https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.1/js/all.min.js
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.1/css/all.min.css" integrity="sha512-+4zCK9k+qNFUR5X+cKL9EIR+ZOhtIloNl9GIKS57V1MyNsYpYcUrUeQc9vNfzsWfV28IaLL3i96P9sdNyeRssA==" crossorigin="anonymous" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.1/js/all.min.js" integrity="sha512-F5QTlBqZlvuBEs9LQPqc1iZv2UMxcVXezbHzomzS6Df4MZMClge/8+gXrKw2fl5ysdk4rWjR0vKS7NNkfymaBQ==" crossorigin="anonymous"></script>
</head>
<body>
<ul class="sci">
<li><i class="fab fa-facebook" aria-hidden="true"></i></li>
<li><i class="fab fa-instagram" aria-hidden="true"></i></li>
<li><i class="fab fa-vk" aria-hidden="true"></i></li>
</ul>
</body>
</html>
You have to get the CDN link from the Font Awesome site. This is what it looks like:
<script src="https://kit.fontawesome.com/9375920.js" crossorigin="anonymous"></script>
(Don't use this one, the ID in there is not valid). Include it in the head of your code and it should work fine.
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>
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!