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

Have you added the CSS File to your .angular-cli.json. "styles": [ "styles.css", "../node_modules/bootstrap/dist/css/bootstrap.css" ], — Devang Patel, Jul 17 '21 at 07:49
https://stackoverflow.com/questions/60365440/how-to-programmatically-use-bootstrap-icons-in-an-angular-project/62780730#62780730 — Eliseo, Jul 18 '21 at 16:09

Yong Shun · Answer 1 · 2021-07-18T01:46:09.073

2

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:

Bootstrap Icons

Scroll to Usage section for getting started

Font Awesome Icons

edited Jul 18 '21 at 01:46

answered Jul 17 '21 at 08:30

Yong Shun

35,286
4
24
46

i added it to index.html of my angular 12 application but it seems that angular do not recognize this script – LearnDeep Jul 17 '21 at 18:10
Are you attach the script from the online link? Or attach it as the downloaded file (in local)? If you **download manually**, be sure that you need add the iconfiy.js file (relative path) in **angular.json (script)**. – Yong Shun Jul 18 '21 at 01:27
I don't think it is an Angular issue, as the browser supports the .js scripts by attaching it in `` section or before `body`
. In case you are looking for an alternative for the icons, you may look at other icon libraries as I mentioned in the answer.
– Yong Shun Jul 18 '21 at 01:34
in normal bootstrap templates i can call easyexternal scripts , but in angular no external script in index.html works , maybe the way of import is a bit different? another syntax to import scripts in angular? – LearnDeep Jul 18 '21 at 17:01
Ok, I think these 2 questions may help you: [Dynamically load external javascript file from Angular component](https://stackoverflow.com/q/44204417/8017690), [How to load external scripts dynamically in Angular?](https://stackoverflow.com/questions/34489916/how-to-load-external-scripts-dynamically-in-angular/42766146#42766146) – Yong Shun Jul 18 '21 at 23:44

icons are not showing in footer angular

1 Answers1

Recommendation 1: Iconify for Angular component

Recommendation 2: Alternatives for Icon Libraries