icons are not showing in footer angular
Question
i am new in angular , i have installed bootsrap 4.6.0 on angular 12 and the bootsrap worked fine and the footer section appeared like it should appear except one little thing , the icons are refusing to show up , it is like they are not part of bootsrap or something , my code is from an example in codepen
here what i have tried:
<div class="footer-dark">
<footer>
<div class="container">
<div class="row">
<div class="col-sm-6 col-md-3 item">
<h3>Services</h3>
<ul>
<li><a href="#">Web design</a></li>
<li><a href="#">Development</a></li>
<li><a href="#">Hosting</a></li>
</ul>
</div>
<div class="col-sm-6 col-md-3 item">
<h3>About</h3>
<ul>
<li><a href="#">Company</a></li>
<li><a href="#">Team</a></li>
<li><a href="#">Careers</a></li>
</ul>
</div>
<div class="col-md-6 item text">
<h3>Company Name</h3>
<p>Praesent sed lobortis mi. Suspendisse vel placerat ligula. Vivamus ac sem lacus. Ut vehicula rhoncus elementum. Etiam quis tristique lectus. Aliquam in arcu eget velit pulvinar dictum vel in justo.</p>
</div>
<div class="col item social"><a href="#"><i class="icon ion-social-facebook"></i></a><a href="#"><i class="icon ion-social-twitter"></i></a><a href="#"><i class="icon ion-social-snapchat"></i></a><a href="#"><i class="icon ion-social-instagram"></i></a></div>
</div>
<p class="copyright">Company Name © 2018</p>
</div>
</footer>
</div>
footer scss:
.footer-dark {
padding:50px 0;
color:#f0f9ff;
background-color:#282d32;
}
.footer-dark h3 {
margin-top:0;
margin-bottom:12px;
font-weight:bold;
font-size:16px;
}
.footer-dark ul {
padding:0;
list-style:none;
line-height:1.6;
font-size:14px;
margin-bottom:0;
}
.footer-dark ul a {
color:inherit;
text-decoration:none;
opacity:0.6;
}
.footer-dark ul a:hover {
opacity:0.8;
}
@media (max-width:767px) {
.footer-dark .item:not(.social) {
text-align:center;
padding-bottom:20px;
}
}
.footer-dark .item.text {
margin-bottom:36px;
}
@media (max-width:767px) {
.footer-dark .item.text {
margin-bottom:0;
}
}
.footer-dark .item.text p {
opacity:0.6;
margin-bottom:0;
}
.footer-dark .item.social {
text-align:center;
}
@media (max-width:991px) {
.footer-dark .item.social {
text-align:center;
margin-top:20px;
}
}
.footer-dark .item.social > a {
font-size:20px;
width:36px;
height:36px;
line-height:36px;
display:inline-block;
text-align:center;
border-radius:50%;
box-shadow:0 0 0 1px rgba(255,255,255,0.4);
margin:0 8px;
color:#fff;
opacity:0.75;
}
.footer-dark .item.social > a:hover {
opacity:0.9;
}
.footer-dark .copyright {
text-align:center;
padding-top:24px;
opacity:0.3;
font-size:13px;
margin-bottom:0;
}
I have no idea why my icons are not launching
a screen capture:
a screen capture about how it supposed to be:
What i am searching for is to find what is the dependency that i am missing in angular (bootstrap 4 is already installed and works fine!) or find the solution for this problem
1 answers
solution1
2 2021-07-17 08:30:17
The icons are from Iconify .
Pre-requisite:
You need to attach the iconify.min.js script in the <head> section.
<script src="https://code.iconify.design/1/1.0.7/iconify.min.js"></script>
The icon element needs to have class="iconify" and data-icon attributes.
<a href="#"><i class="icon iconify" data-icon="ion-social-facebook"></i></a>
<a href="#"><i class="icon iconify" data-icon="ion-social-twitter"></i></a>
<a href="#"><i class="icon iconify" data-icon="ion-social-snapchat"></i></a>
<a href="#"><i class="icon iconify" data-icon="ion-social-instagram"></i></a>
Recommendation 1: Iconify for Angular component
Or you may look for Iconify for Angular component if you not prefer to use script.
Recommendation 2: Alternatives for Icon Libraries
In case you are looking for icon alternatives, these are the libraries that you may look for:
Scroll to Usage section for getting started
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.