title: icons are not showing in footer angular
body: <p>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</p>
  <p>here what i have tried:</p>
  <pre><code>&lt;div class=&quot;footer-dark&quot;&gt;
      &lt;footer&gt;
          &lt;div class=&quot;container&quot;&gt;
              &lt;div class=&quot;row&quot;&gt;
                  &lt;div class=&quot;col-sm-6 col-md-3 item&quot;&gt;
                      &lt;h3&gt;Services&lt;/h3&gt;
                      &lt;ul&gt;
                          &lt;li&gt;&lt;a href=&quot;#&quot;&gt;Web design&lt;/a&gt;&lt;/li&gt;
                          &lt;li&gt;&lt;a href=&quot;#&quot;&gt;Development&lt;/a&gt;&lt;/li&gt;
                          &lt;li&gt;&lt;a href=&quot;#&quot;&gt;Hosting&lt;/a&gt;&lt;/li&gt;
                      &lt;/ul&gt;
                  &lt;/div&gt;
                  &lt;div class=&quot;col-sm-6 col-md-3 item&quot;&gt;
                      &lt;h3&gt;About&lt;/h3&gt;
                      &lt;ul&gt;
                          &lt;li&gt;&lt;a href=&quot;#&quot;&gt;Company&lt;/a&gt;&lt;/li&gt;
                          &lt;li&gt;&lt;a href=&quot;#&quot;&gt;Team&lt;/a&gt;&lt;/li&gt;
                          &lt;li&gt;&lt;a href=&quot;#&quot;&gt;Careers&lt;/a&gt;&lt;/li&gt;
                      &lt;/ul&gt;
                  &lt;/div&gt;
                  &lt;div class=&quot;col-md-6 item text&quot;&gt;
                      &lt;h3&gt;Company Name&lt;/h3&gt;
                      &lt;p&gt;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.&lt;/p&gt;
                  &lt;/div&gt;
                  &lt;div class=&quot;col item social&quot;&gt;&lt;a href=&quot;#&quot;&gt;&lt;i class=&quot;icon ion-social-facebook&quot;&gt;&lt;/i&gt;&lt;/a&gt;&lt;a href=&quot;#&quot;&gt;&lt;i class=&quot;icon ion-social-twitter&quot;&gt;&lt;/i&gt;&lt;/a&gt;&lt;a href=&quot;#&quot;&gt;&lt;i class=&quot;icon ion-social-snapchat&quot;&gt;&lt;/i&gt;&lt;/a&gt;&lt;a href=&quot;#&quot;&gt;&lt;i class=&quot;icon ion-social-instagram&quot;&gt;&lt;/i&gt;&lt;/a&gt;&lt;/div&gt;
              &lt;/div&gt;
              &lt;p class=&quot;copyright&quot;&gt;Company Name © 2018&lt;/p&gt;
          &lt;/div&gt;
      &lt;/footer&gt;
  &lt;/div&gt;
  </code></pre>
  <p>footer scss:</p>
  <pre><code>.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 &gt; 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 &gt; a:hover {
      opacity:0.9;
    }
    
    .footer-dark .copyright {
      text-align:center;
      padding-top:24px;
      opacity:0.3;
      font-size:13px;
      margin-bottom:0;
    }
  </code></pre>
  <p>I have no idea why my icons are not launching</p>
  <p>a screen capture:</p>
  <p><a href="https://i.stack.imgur.com/5aWl7.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/5aWl7.png" alt="enter image description here" /></a></p>
  <p>a screen capture about how it supposed to be:
  <a href="https://i.stack.imgur.com/h1UWr.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/h1UWr.png" alt="enter image description here" /></a></p>
  <p>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</p>