As a beginner in web design, I am experimenting with using font awesome icons in Angular 9 projects within list items. While some of the icons are displaying properly, others are not. You can see the issue in the attached image. To access the icons, I have used https://fontawesome.com/icons?d=gallery&m=free. Refer to the attached image for clarity: https://i.sstatic.net/kRZpc.png
This is the HTML code structure:
<div class="icons-list">
<ul>
<li>
<div class="media-items">
<div class="media-left">
<i class="fa fa-rocket fa-3x"></i>
</div>
<div class="media-body">
<h4 class="title">56</h4><span class="title-description">Companies we helped</span></div>
</div>
</li>
<!-- Other list items with different icons -->
The CSS styling is defined as follows:
.media-body {
display: table-cell;
}
.title {
font-weight: 1000;
background: -webkit-linear-gradient(#736fb3, #55bce7);
background-clip: border-box;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
.title-description {
font-style: italic;
font-weight: bold;
}
And in angular.json, the styles are imported from Bootstrap, Font Awesome, and custom CSS files:
"styles": [
"./node_modules/bootstrap/dist/css/bootstrap.min.css",
"./node_modules/font-awesome/css/font-awesome.css",
"./src/styles.css"
],