Unable to load home icon in html code using font-awesome - html

<!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>

Related

Why cart icon is not showing?

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>

Specific container's class name causing children to disappear?

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?

Bootstrap doesn't works

<!DOCTYPE html>
<html>
<head>
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.1.1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-F3w7mX95PdgyTmZZMECAngseQB83DfGTowi0iMjiWaeVhAn4FJkqJByhZMI3AhiU" crossorigin="anonymous">
<link href="https://fonts.googleapis.com/css2?family=Montserrat:wght#100&display=swap" rel="stylesheet">
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>Lipsum</title>
<link href="style.css" rel="stylesheet" type="text/css" />
</head>
<body>
<script src="script.js"></script>
<div class="container">
<div class="Title"><h2>Lorem Ipsum</h2></div>
<br>
<div class="Index">
<i class="bi bi-app"></i> Lorem <!-- Başlık -->
</div>
</div>
</body>
</html>
Bootstrap doesn't works, how to fix it?
I don't want install any packages etc.
I tried few other icons and it again not worked, I don't have any idea for fix and I don't know what is the problem.

first, put the bootstrap CDN and google fonts files below the title tag.
then put the js script file to last inside the body. then try again.
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>Lipsum</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.1.1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-F3w7mX95PdgyTmZZMECAngseQB83DfGTowi0iMjiWaeVhAn4FJkqJByhZMI3AhiU" crossorigin="anonymous">
<link href="https://fonts.googleapis.com/css2?family=Montserrat:wght#100&display=swap" rel="stylesheet">
<link href="style.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div class="container">
<div class="Title"><h2>Lorem Ipsum</h2></div>
<br>
<div class="Index">
<i class="bi bi-app"></i> Lorem <!-- Başlık -->
</div>
</div>
<script src="script.js"></script>
</body>

Fixed Action Buttons not working properly?

I am trying to learn Materialize (materializecss.com) and I am stuck with how to make action buttons. The button on the lower left hand corner appears, but when I hover, the other buttons do not then appear.
<!DOCTYPE html>
<html>
<head>
<!--Import Google Icon Font-->
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<!--Import materialize.css-->
<link type="text/css" rel="stylesheet" href="css/materialize.min.css" media="screen,projection"/>
<!--Let browser know website is optimized for mobile-->
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
</head>
<body>
<script type="text/javascript" src="js/materialize.min.js"></script>
<div class="fixed-action-btn">
<a class="btn-floating btn-large red">
<i class="large material-icons">mode_edit</i>
</a>
<ul>
<li><a><i class="material-icons">publish</i></a></li>
<li><a><i class="material-icons">publish</i></a></li>
</ul>
</div>
<!--JavaScript at end of body for optimized loading-->
</body>
</html>
Help! Thanks in advance.

I have added jquery in code and its working fine for me,
See my code below:
<!DOCTYPE html>
<html>
<head>
<!--Import Google Icon Font-->
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<!--Import materialize.css-->
<link href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.100.2/css/materialize.min.css" rel="stylesheet"/>
<!--Let browser know website is optimized for mobile-->
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
</head>
<body>
<div class="fixed-action-btn">
<a class="btn-floating btn-large red">
<i class="large material-icons">mode_edit</i>
</a>
<ul>
<li><a><i class="material-icons">publish</i></a></li>
<li><a><i class="material-icons">publish</i></a></li>
</ul>
</div>
<!--JavaScript at end of body for optimized loading-->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.100.2/js/materialize.min.js"></script>
</body>
</html>

My bootstrap navigation pills aren't working

I'm trying to set up a bootstrap pill nav menu, but for some reason the pills aren't working and the content just all shows up on one page, even though the active pill does change.
<div class="navigation">
<ul class="nav nav-pills head-menu" id="navbar">
<li class="active">About Us</li>
<li><a href="#sponsorstab" data-toggle="pill" >Sponsors</a></li>
<li>Conference</li>
<li>Execs</li>
<li>Gallery</li>
<li>Contact Us</li>
</ul>
</div>
<div class="tab-content">
<div class="tab-pane" id="abouttab">
<h1>Testing</h1>
</div>
<div class="tab-pane" id="sponsorstab">
<p>Place holder text</p>
</div>
</div>
Any Solution?
My head
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Untitled</title>
<link rel="stylesheet" type="text/css" href="menu.css">
<link rel="stylesheet" type="text/css" href="main.css">
<link rel="stylesheet" type="text/css" href="about-page.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap-theme.min.css">
<link rel="stylesheet" href="bootstrap.min.css">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="bootstrap.min.js"></script>

Your code appears correct. Here's a jsfiddle that I used to test: http://jsfiddle.net/zqpfo8f5/
Are you sure you're properly adding bootstrap's required files?
<!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">
<title>Bootstrap 101 Template</title>
<!-- Bootstrap -->
<link href="css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<h1>Hello, world!</h1>
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="js/bootstrap.min.js"></script>
</body>
</html>