I have tried installing bootstrap and font-awesome in angular app but it's not working.

I used npm install --save bootstrap font-awesome and I added the bootstrap and font-awesome in the angular.json like this

"styles": ["node_modules/bootstrap/dist/css/bootstrap.min.css", "node_modules/font-awesome/css/all.min.css", "src/styles.css"], "scripts": ["node_modules/bootstrap/dist/js/bootstrap.min.js"

Yet when I run <i ></i>

in the app.component.html page it's not working.

I am using angular 15.1.4, what am I not doing right please.

CodePudding user response：

Add your font-awesome code in div container or an a class container, that should be fine in my opinion, you should also check bootstrap examples given at https://fontawesome.com/v4/examples/#bootstrap

CodePudding user response：

There are a few potential reasons why this might be happening:

1. Make sure you have properly installed Bootstrap and Font Awesome using npm by running npm install --save bootstrap font-awesome.

2. Ensure the paths to the CSS and JS files in your angular.json file are correct and accessible.

3. Try using the Font Awesome CDN instead of including the files in your project to make sure the issue isn't with your project setup.

4. Make sure you have included the required dependencies for Bootstrap and Font Awesome to work correctly.

5. Try clearing your browser cache to make sure that you are loading the latest version of your app.

6. Try using a different browser to see if the issue is specific to the browser you are using.

Here is the recommended way to install Bootstrap and Font Awesome in Angular (Please double check this steps):

1. Install Bootstrap and Font Awesome using npm by running "npm install --save bootstrap font-awesome" in your terminal/command prompt.

2. Add the following lines to your styles array in the angular.json file:

    "styles": [
    "node_modules/bootstrap/dist/css/bootstrap.min.css",
    "node_modules/font-awesome/css/all.min.css"
    ],

3. Add the following lines to your scripts array in the angular.json file:

    "scripts": [
    "node_modules/jquery/dist/jquery.slim.min.js",
    "node_modules/popper.js/dist/umd/popper.min.js",
    "node_modules/bootstrap/dist/js/bootstrap.min.js"
    ],

4. In your HTML file, you can now use Font Awesome icons by using the following syntax:

    <i ></i>

5. For Bootstrap classes and components, you can use them in your HTML file as per the normal Bootstrap documentation.

Note: Make sure you restart your Angular development server after making these changes for them to take effect.