CODEWITHSUNDEEP
angularbootstrap-4
LearnDeep
LearnDeep

Reputation: 47

icons are not showing in footer angular

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:

enter image description here

a screen capture about how it supposed to be: enter image description here

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

Upvotes: 0

Views: 650

Answers (1)

Yong Shun
Yong Shun

Reputation: 51285

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>

Sample solution on StackBlitz

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:

  1. Bootstrap Icons

Scroll to Usage section for getting started

  1. Font Awesome Icons

Upvotes: 2

Related Questions