The icons from Font Awesome are not displaying properly in Angular version 15

I have been searching for new information to help solve the error I am experiencing but haven't found any useful results. Here is my issue: I am working on a project in Angular 15.1.0 and want to incorporate some Font Awesome icons. To do this, I followed these steps: 

npm install @fortawesome/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="15747b726079746738737a7b61746270667a78787f5575313f2427226e">[email protected]</a>
Next, in angular.json, I added 
"node_modules/@fortawesome/fontawesome-free/css/all.css"
at the beginning of the "styles" array. Then, inside my component, I added 
<i class="fa fa-spinner fa-spin"></i>
as a button value. However, the spinner button does not render for some unknown reason. In the console, I can see the <i> element with Font Awesome classes, but there are no class definitions displayed. I also attempted to import Font Awesome inside app.module.ts without success. Does anyone have an idea where I could find the root cause of the issue? P.S. I made sure that none of the other styles are conflicting with Font Awesome. The default style file in my project is .SCSS, if that makes a difference.

cssangularfont-awesome

Answer №1

To utilize angular-fontawesome, follow these steps:

  1. First, install @fortawesome/free-solid-svg-icons package by running 

    npm install @fortawesome/free-solid-svg-icons --save

  2. Next, import FontAwesomeModule in the module you are using it, for example, in the main AppModule

    @NgModule({
  imports: [
   BrowserModule,
   FontAwesomeModule
 ],
declarations: [AppComponent],
bootstrap: [AppComponent]
})
export class AppModule { }

  3. Then, import the required icon in your component

    import { Component } from '@angular/core';
import { faSpinner } from '@fortawesome/free-solid-svg-icons';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html'
})
export class AppComponent {
  faSpinner = faSpinner;
}

  4. Finally, use the icon in your template by adding the fa-icon tag

<fa-icon [icon]="faSpinner" [spin]="true"></fa-icon>

For a working example, check out this link: https://stackblitz.com/edit/angular-ivy-xvlcfq?file=src%2Fapp%2Fapp.component.html,src%2Fapp%2Fapp.component.ts

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

Missing sidebar display

Hi there! I am having an issue with my sidebar not appearing correctly when I click on the toggle button. It seems to be moving to the side, but the sidebar itself is blank or transparent. I suspect that the problem lies within my JavaScript file. As a beg ...

javascripthtmlcssnavbarsidebar

Searching for a particular Prettier setting

Seeking a Nicer alternative. I am exploring if there is a way to format code like this without moving the first attribute to a new line: <div class="test-class" [test-binding]="true" (test-binging)="test()" ...

javascripthtmlangularprettier

Here are the steps to effectively incorporate CSS classes in a form using Laravel Collective 5.2 framework

Hi there, I am currently working on developing an application and find myself in need of implementing CSS classes to a form using Collective Laravel "5.2.*". The snippet of code that I have at the moment is as follows: {!! Form::model($user, array(&apos ...

htmlcsslaravel

Angular static dropdown option

<input [formControl]="twitterHandle" id="twitterHandle" placeholder="twitterHandle"> Fetching the input value from the Twitter handle input field using the following code: twitterHandle = new FormControl(); this.twitterHandle.value; Similarly, if ...

htmlangular

Guide on creating frozen columns in an Angular 2 table with the ability to scroll through multiple columns

Within my table, there are 3 columns that must always remain on the left side. Additionally, there is a column containing a grid where each element represents an hour of the day, requiring it to be scrollable. I have attempted various proposed solutions, ...

htmlcsstwitter-bootstrapangular

The dimensions of the div are fixed and contains some text

Can someone help me with my coding issue? I created a custom drop-down menu, but the problem is that my content div does not expand to 100% of the width. It seems to be stuck at 160px. Here is the CSS code snippet: .dropdown-content { display: none; po ...

htmlcss

Designing an immersive full-screen experience with scrollable columns using Bootstrap

Trying to achieve a full-screen layout that occupies 100% of the viewport with a sticky header and footer, along with columns in the main content area that can be individually scrolled. I've been experimenting with using classes like .h-100 and .flex ...

csstwitter-bootstrapflexboxbootstrap-4

jQuery, the magical tool that can make forms disappear and reappear in a blink

As the heading suggests, here is the code I attempted. The forms are designed to be displayed one after the other, with each subsequent form's appearance being determined by the information provided in the previous forms. $(document).ready(function() ...

phpjqueryhtmlcss

Angular app - static List mysteriously clears out upon refresh

My goal is to create a login page using Angular. I have an Angular component with HTML, CSS, and TypeScript files that manage this functionality. The HTML file contains two fields (Username and Password) and two buttons (Login and Register). When a user en ...

javascripthtmlangulartypescript

What is the process of transforming two forms into components and then integrating those components into a view in Angular 5?

Currently, I have two forms running smoothly on the same component as shown in InfoAndQualificationComponent.ts import { Component, OnInit } from '@angular/core'; import { FormGroup, FormControl } from "@angular/forms"; @Component({ selector: ...

angulartypescriptangular-componentsangular-reactive-forms

I am having issues with the Okta Angular sign-in widget as it is not redirecting

Recently, I integrated the Okta angular sign-in widget into my project, but I encountered an issue. In my application, I have multiple modules including an authentication module that manages sign-in, sign-out, and sign-up functionalities. The route I ult ...

angulartypescriptokta

Including a Javascript library (jsencrypt) in an Angular 2 application

I have gone through countless tutorials on this particular issue, but unfortunately, I have not yet found a solution. Let me provide some context first. I am working on an Angular 2 application and I need to incorporate this JS library for encryption: http ...

javascriptangulartypescriptimportjsencrypt

Adjust the div height to 100% in Bootstrap to center text, even with the presence of a navbar

I'm currently using Bootstrap 5 and facing an issue with getting text centered vertically on the page. I attempted to make the container of the div take up 100% of the page by using h-100, but it resulted in overflow due to the navbar occupying some s ...

htmlcsstwitter-bootstrapwebbootstrap-5

Issue with CSS File not being recognized by React Component

After using the webpack create-react-app with npx, I encountered an issue with my component styling. Despite having a CSS file named header.css in the src directory alongside Header.js, my component does not seem to be styled correctly. Here is how my comp ...

cssreactjs

Angular 10 does not reflect changes in the array when they occur

My component receives an array of offers from an Observable. However, when the list is modified (a offer is deleted), the component's list does not update accordingly. I attempted to use ngOnChanges to resubscribe to the list and update it in my comp ...

javascriptangularrxjs

Internet Explorer is unable to recognize the .less file format

I have created a less file that works perfectly in Chrome and Firefox, but it is not being recognized in IE 9. Does anyone have suggestions on how to make it run in IE 9.0? Below is a sample of the CSS code: @import "../core/variables.less"; @import "Mi ...

cssless

Navigating through an array to extract necessary information within an Angular framework

Below is the JSON data I have: [{ "_id": 1, "Name": "x", "Email": "<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="a6dce6c3d6d5cfcac9c888c5c9cb">[email protected]</a> ", "Designation": "Manager", "Projec ...

jsonangularangular6

Display options based on the value selected in the preceding selection

How can I dynamically display select options in an Angular select based on a previously selected value? Take a look at the code snippet below. Here, I have implemented a conditional display of select options (Target 1/Target 2) based on the value selected ...

angulartypescriptvmware-clarity

Utilizing the background-clip property with a gradient overlay

My Objective: https://i.sstatic.net/DscXK.png My goal is to have both the arrow container and the full-width bar share the same gradient. I initially tried creating them separately and applying the gradient individually, but it resulted in a clipped look. ...

htmlcssgradientbackground-clip

I want to set a single background image for all slides in fullPage.js. How can I achieve this

I am attempting to replicate a similar effect as shown in this example: The demonstration above utilizes the fullPage.js plugin. You may have noticed how the background image remains consistent while navigating through different sections. I have searched ...

javascriptjqueryhtmlcssfullpage.js