'Social media icons not showing correctly in my footer
I'm a newbie in programming and I want to make a dark footer, dark navbar and some carousel content, the problem is that the social media icons and the copyright symbol in my footer, they are not shown well. They are half shown. How can I fix this ?
Here's my piece of code
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css"
rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"> </script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font- awesome.min.css">
<script src="https://code.jquery.com/jquery-1.12.3.min.js"
integrity="sha256-aaODHAgvwQW1bFOGXMeX+pC4PZIPsvn2h1sArYOhgXQ=" crossorigin="anonymous"></script>
<style>
.carousel img {
max-height: 500px;
margin: 0 auto;
}
.footer {
margin-top: auto;
position: fixed;
left: 0;
bottom: 0;
width: 100%;
height:60px;
background-color: black;
color: white;
text-align: center;
}
.fa {
z-index: 999;
}
</style>
</head>
<body>
<header>
<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
<div class="container-fluid">
<a class="navbar-brand" href="#">Navbar</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav me-auto mb-2 mb-lg-0">
<li class="nav-item">
<a class="nav-link active" aria-current="page" href="#">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">About Us</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-bs-toggle="dropdown" aria-expanded="false">
Dropdown
</a>
<ul class="dropdown-menu" aria-labelledby="navbarDropdown">
<li><a class="dropdown-item" href="#">Action</a></li>
<li><a class="dropdown-item" href="#">Another action</a></li>
<li><hr class="dropdown-divider"></li>
<li><a class="dropdown-item" href="#">Something else here</a></li>
</ul>
</li>
<li class="nav-item">
<a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Disabled</a>
</li>
</ul>
<form class="d-flex">
<input class="form-control me-2" type="search" placeholder="Search" aria-label="Search">
<button class="btn btn-outline-success" type="submit">Search</button>
</form>
</div>
</div>
</nav>
</header>
<!-- Carousel -->
<div id="demo" class="carousel slide" data-bs-ride="carousel">
<!-- Indicators/dots -->
<div class="carousel-indicators">
<button type="button" data-bs-target="#demo" data-bs-slide-to="0" class="active"></button>
<button type="button" data-bs-target="#demo" data-bs-slide-to="1"></button>
<button type="button" data-bs-target="#demo" data-bs-slide-to="2"></button>
</div>
<!-- The slideshow/carousel -->
<div class="carousel-inner">
<div class="carousel-item active">
<img src="C:\Users\X\Desktop\TayauClinic\TayauClinic\wwwroot\images\2.jpg" alt="Los Angeles" class="d-block" style="width:100%">
<div class="carousel-caption">
<h3>Los Angeles</h3>
<p>We had such a great time in LA!</p>
</div>
</div>
<div class="carousel-item">
<img src="C:\Users\X\Desktop\TayauClinic\TayauClinic\wwwroot\images\94d5de53-9c68-44d9-b307-7403941f8bec_5cfb0b35-b3c8-404a-bbed-b310f3808001_david.png" alt="Chicago" class="d-block" style="width:100%">
<div class="carousel-caption">
<h3>Chicago</h3>
<p>Thank you, Chicago!</p>
</div>
</div>
<div class="carousel-item">
<img src="C:\Users\X\Desktop\TayauClinic\TayauClinic\wwwroot\images\96de3852-3519-4761-b3ce-3d711d72366e_c1c3639f-0a8a-434c-8d74-c138b3ca6f06_freya.png" alt="New York" class="d-block" style="width:100%">
<div class="carousel-caption">
<h3>New York</h3>
<p>We love the Big Apple!</p>
</div>
</div>
</div>
<!-- Left and right controls/icons -->
<button class="carousel-control-prev" type="button" data-bs-target="#demo" data-bs-slide="prev">
<span class="carousel-control-prev-icon"></span>
</button>
<button class="carousel-control-next" type="button" data-bs-target="#demo" data-bs-slide="next">
<span class="carousel-control-next-icon"></span>
</button>
</div>
<footer class=" footer ">
<div class="container-fluid py-5 position-b-0">
<div class="row">
<div class="col-sm-6 col-xs-6 col-md-6 col-lg-6">
<h6>© 2022 - . All right reserved.</h6>
</div>
<div class="col-sm-6 col-xs-6 col-md-6 col-lg-6">
<a style="color: #3b5998 ;" href="#" target="_blank"><i class="fa fa-3x fa-facebook-f fa-lg"></i></a>
<a style="color: #55acee;" href="#"><i class="fa fa-3x fa-twitter fa-lg"></i></a>
<a style="color: #ac2bac;" href="#!"><i class="fa fa-3x fa-instagram fa-lg"></i></a>
<a style="color: #dd4b39;" href="#"><i class="fa fa-3x fa-google-plus fa-lg"></i></a>
</div>
</div>
</div>
</footer>
</body>
</html>
This is what I get when I run my code:
Solution 1:[1]
You have fixed height for the footer.
updated code:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"> </script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font- awesome.min.css">
<script src="https://code.jquery.com/jquery-1.12.3.min.js" integrity="sha256-aaODHAgvwQW1bFOGXMeX+pC4PZIPsvn2h1sArYOhgXQ=" crossorigin="anonymous"></script>
<style>
.carousel img {
max-height: 500px;
margin: 0 auto;
}
.footer {
margin-top: auto;
position: fixed;
left: 0;
bottom: 0;
width: 100%;
/* height: 60px; */
background-color: black;
color: white;
text-align: center;
}
.fa {
z-index: 999;
}
</style>
</head>
<body>
<header>
<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
<div class="container-fluid">
<a class="navbar-brand" href="#">Navbar</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav me-auto mb-2 mb-lg-0">
<li class="nav-item">
<a class="nav-link active" aria-current="page" href="#">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">About Us</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-bs-toggle="dropdown" aria-expanded="false">
Dropdown
</a>
<ul class="dropdown-menu" aria-labelledby="navbarDropdown">
<li><a class="dropdown-item" href="#">Action</a></li>
<li><a class="dropdown-item" href="#">Another action</a></li>
<li>
<hr class="dropdown-divider">
</li>
<li><a class="dropdown-item" href="#">Something else here</a></li>
</ul>
</li>
<li class="nav-item">
<a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Disabled</a>
</li>
</ul>
<form class="d-flex">
<input class="form-control me-2" type="search" placeholder="Search" aria-label="Search">
<button class="btn btn-outline-success" type="submit">Search</button>
</form>
</div>
</div>
</nav>
</header>
<!-- Carousel -->
<div id="demo" class="carousel slide" data-bs-ride="carousel">
<!-- Indicators/dots -->
<div class="carousel-indicators">
<button type="button" data-bs-target="#demo" data-bs-slide-to="0" class="active"></button>
<button type="button" data-bs-target="#demo" data-bs-slide-to="1"></button>
<button type="button" data-bs-target="#demo" data-bs-slide-to="2"></button>
</div>
<!-- The slideshow/carousel -->
<div class="carousel-inner">
<div class="carousel-item active">
<img src="C:\Users\X\Desktop\TayauClinic\TayauClinic\wwwroot\images\2.jpg" alt="Los Angeles" class="d-block" style="width:100%">
<div class="carousel-caption">
<h3>Los Angeles</h3>
<p>We had such a great time in LA!</p>
</div>
</div>
<div class="carousel-item">
<img src="C:\Users\X\Desktop\TayauClinic\TayauClinic\wwwroot\images\94d5de53-9c68-44d9-b307-7403941f8bec_5cfb0b35-b3c8-404a-bbed-b310f3808001_david.png" alt="Chicago" class="d-block" style="width:100%">
<div class="carousel-caption">
<h3>Chicago</h3>
<p>Thank you, Chicago!</p>
</div>
</div>
<div class="carousel-item">
<img src="C:\Users\X\Desktop\TayauClinic\TayauClinic\wwwroot\images\96de3852-3519-4761-b3ce-3d711d72366e_c1c3639f-0a8a-434c-8d74-c138b3ca6f06_freya.png" alt="New York" class="d-block" style="width:100%">
<div class="carousel-caption">
<h3>New York</h3>
<p>We love the Big Apple!</p>
</div>
</div>
</div>
<!-- Left and right controls/icons -->
<button class="carousel-control-prev" type="button" data-bs-target="#demo" data-bs-slide="prev">
<span class="carousel-control-prev-icon"></span>
</button>
<button class="carousel-control-next" type="button" data-bs-target="#demo" data-bs-slide="next">
<span class="carousel-control-next-icon"></span>
</button>
</div>
<footer class=" footer ">
<div class="container-fluid py-5 position-b-0">
<div class="row">
<div class="col-sm-6 col-xs-6 col-md-6 col-lg-6">
<h6>© 2022 - . All right reserved.</h6>
</div>
<div class="col-sm-6 col-xs-6 col-md-6 col-lg-6">
<a style="color: #3b5998 ;" href="#" target="_blank"><i class="fa fa-3x fa-facebook-f fa-lg"></i></a>
<a style="color: #55acee;" href="#"><i class="fa fa-3x fa-twitter fa-lg"></i></a>
<a style="color: #ac2bac;" href="#!"><i class="fa fa-3x fa-instagram fa-lg"></i></a>
<a style="color: #dd4b39;" href="#"><i class="fa fa-3x fa-google-plus fa-lg"></i></a>
</div>
</div>
</div>
</footer>
</body>
</html>Solution 2:[2]
I would recommend to use the svg bootstrap icons!
You click in the desired icon and look for the svg option.
The example for facebook
<svg style="color:white" xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-facebook" viewBox="0 0 16 16">
<path d="M16 8.049c0-4.446-3.582-8.05-8-8.05C3.58 0-.002 3.603-.002 8.05c0 4.017 2.926 7.347 6.75 7.951v-5.625h-2.03V8.05H6.75V6.275c0-2.017 1.195-3.131 3.022-3.131.876 0 1.791.157 1.791.157v1.98h-1.009c-.993 0-1.303.621-1.303 1.258v1.51h2.218l-.354 2.326H9.25V16c3.824-.604 6.75-3.934 6.75-7.951z"/>
</svg>
Be careful with the colors tho! You can modify them in the style tag. Happy coding!
Solution 3:[3]
Try adding that to your css .footer class:
display: flex;
align-items: center;
and perhaps as well remove your py-5 if that doesn't work
Solution 4:[4]
The problem within this line
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font- awesome.min.css">
you have space in filename font- awsome.min.css
Correct Link:-
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
Sources
This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.
Source: Stack Overflow
| Solution | Source |
|---|---|
| Solution 1 | nagendra nag |
| Solution 2 | |
| Solution 3 | Damien Puaud |
| Solution 4 | ash |