Some font-awesome icons are not appearing on the screen

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"
                        ],

Answer №1

your css doesn't include fas. Please update it to fa and change fa-handshake to fa-handshake-o

<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" />
<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>
    <li>
        <div class="media-items">
            <div class="media-left">
                <i class="fa fa-briefcase fa-3x"></i>
            </div>
            <div class="media-body">
                <h4 class="title">12</h4><span class="title-description">Corporate Programs</span>                 </div>
        </div>
    </li>
    <li>
        <div class="media-items">
            <div class="media-left">
                <i class="fa fa-globe fa-3x"></i>
            </div>
            <div class="media-body">
                <h4 class="title">09</h4><span class="title-description">Services Provided across domains</span></div>
        </div>
    </li>
    <li>
        <div class="media-items">
            <div class="media-left">
                <i class="fa fa-handshake-o fa-3x"></i>
            </div>
            <div class="media-body">
                <h4 class="title">32</h4><span class="title-description">Happy Clients</span>
            </div>
        </div>
    </li>

    <li>
        <div class="media-items">
            <div class="media-left">
                <i class="fa fa-user fa-3x"></i>
            </div>
            <div class="media-body">
                <h4 class="title">20</h4><span class="title-description">Awesome Employees</span>
            </div>
        </div>
    </li>
 </ul>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Utilize the Math.log() function within an HTML document

I am attempting to incorporate a Math operation in an HTML page, but unfortunately it is not functioning as expected. Here is the code snippet that I have experimented with. Is there any solution to make this code operational? HTML code <div> < ...

Unable to use the select function in Android 2.2

When I click on the select button in my app, it displays multiple options. This functionality works smoothly on Android 4.1, but on Android 2.2, clicking on the select button does not have any effect and therefore the options cannot be selected. <sec ...

Fixed position scrollable tabs with Material UI

I recently implemented material-ui scrollable tabs in my project, referencing the documentation at https://mui.com/material-ui/react-tabs/#scrollable-tabs. Here is a snippet of the code I used: <Tabs value={value} onChange={handleChange ...

Is there a way to determine the dimensions of a pdf file using javascript and capture a snapshot of it for showcasing on a website?

I'm fairly new to HTML/CSS and haven't delved into javascript yet, but I have a good understanding of reading other people's code. Currently, I'm putting together my portfolio website and would like to include my resume on the page in a ...

Issue with slide animation in carousel on Bootstrap version 4.5.2 not functioning as intended

Recently, I've been diving into learning Bootstrap (v4.5.2) and decided to implement a basic carousel on my website that slides automatically. Following the documentation on Bootstrap's website, I copied the example code for a simple carousel wit ...

Exploring the functionality of Protractor testing in combination with Angular 2, focusing

I am currently developing an Angular 2 application and I require some information regarding unit testing with Protractor. Previously, in Angular 1, we were able to check for things like: element(by.css('[ng-click="myFunction()"]')) in our test ...

"Utilizing ng2 dragula allows for the seamless addition of new data to an element after it has been dropped, based on the

My experience with the ng2 Dragula library revealed some intriguing aspects. I noticed that when dragging an element from one container to another, the element would expand to showcase additional data features such as Droplists, HTML input forms, and more ...

Incorporate a comma after the second or third digit to separate currency values in JavaScript

Is there a way to add commas to currency values at the 3rd or 2nd place depending on the value itself? The desired output format is: 1000 => 1000 10000 => 10,000 210000 => 2,10,000 2010000 => 20,10,000 12010000 => 1,20,10,000 I am currentl ...

Triggering an animation on one element by hovering over a different element

I'm trying to create a cool effect where the train ticket rotates when I hover over a leaf. Although I can get the train ticket to rotate when I hover over it directly, it doesn't seem to work when I hover over the leaf. Can someone help me spot ...

When triggering the event: Was anticipating a spy, however received a Function instead

Upon running my test, I encountered the following error message: Error: Unhandled Promise rejection: <toHaveBeenCalledWith> : Expected a spy, but received Function. it('should change the value of myComponent', () => { spyOn(component ...

Animation does not trigger before switching pages

I'm attempting to create an animation that occurs before the page transitions. After finding a jQuery script on this site and tweaking it to match my HTML, I realized the code works in a fiddle but not on my actual page. Any assistance would be greatl ...

Unable to initialize default values on Form Load in Angular Reactive Forms

My goal is to make an HTTP request by passing an ID, then take the response and assign the values to form fields. I attempted using setValue and patchValue methods, but they did not yield the desired results. spService itemData = new ItemData() getIte ...

Enhance Your Images with Hovering Icons

Is there a way to display an icon checkmark over the main image when a user hovers over it? The icon should appear in the top right corner of the image. <div> <img class="result-image" src="{{$property->photo}}"> <! ...

Adjust the message hues upon form submission with Ajax

Can anyone provide assistance? I am in need of a functional form for sending emails. <form enctype="multipart/form-data" role="form" id="form" method="post" action="handler.php"> <div class="form-row"> <div class="form-g ...

Having difficulty resolving the fs and child_process modules

Even though I've come across numerous questions with similar situations, none of them have provided the solution I need. I'm attempting to utilize the 'ffmpeg-static-electron' dependency on Angular Electron. After running npm install ...

Displaying the Ionic loading spinner on the entire page rather than a restricted small box

Right now, I'm able to implement a basic loading effect, but it appears as a small box. presentCustomLoading() { let loading = this.loadingCtrl.create({ content: 'Loading Please Wait...' }); loading.present(); } However, I ...

What are some solutions for resolving a background image that fails to load?

HTML: `<div class="food-imagesM imagecontainer"> <!--Page info decoration etc.--> </div>` CSS: `.food-imagesM.imagecontainer{ background-image: url("/Images/Caribbean-food-Menu.jpg"); background-repeat: no-repeat; backgroun ...

Empty input fields in Javascript calculations will result in a NaN output

I need to perform a calculation using values entered into form fields and JavaScript. The formula I'll be using is as follows: totalEarnings = income1 + income2 * 0.7 + income3 / 48 + (income4 * 0.7) / 48; The variables income1, income2, income3, an ...

Customizing the Global Error Handler in Angular

Our project utilizes a global error handler to manage errors. However, we have encountered a unique scenario where we need to handle a specific case separately but are unable to do so. The global error handler is configured in the app.module.ts: { provide: ...

Tips for displaying an error message when there is no match found in ng repeat due to filtering

I'm facing an issue with displaying an error message when no match is found after searching in a text box. I've used ng-show to display the message, but it's not working as expected. Can someone assist me with this problem? I am relatively n ...