I am having trouble getting bootstrap-icons to work in my Angular project and I'm eager to figure it out

I am having trouble incorporating bootstrap-icons into my angular project. Despite running the npm i bootstrap-icons command, I am unable to successfully add icons using icon fonts on my webpage.

As a temporary solution, I have added the bootstrap icon CDN in my index.html file and it is functioning as expected.

My question is whether or not there is a specific path that needs to be included for the bootstrap icon file in the angular.json file, or if it should work seamlessly after running the install command.

Any insights or advice would be greatly appreciated!

Thank you.

htmlcssangularbootstrap-5bootstrap-icons

Answer №1

To get started, you need to execute the command 

npm install bootstrap-icons --save

After that, navigate to the angular.json configuration file

Insert the path to the "Styles" key value like shown below,

"styles": ["node_modules/bootstrap-icons/font/bootstrap-icons.css",]

Answer №2

To start using Bootstrap icons, first install them using npm:

npm i bootstrap-icons --save

Next, open your angular.json file and include the following in your styles:

"styles": [
          "src/styles.scss",
          "node_modules/bootstrap-icons/font/bootstrap-icons.css"
        ],

You can now easily use any icon you want by adding the appropriate HTML code, for example:

<i class="bi bi-bootstrap-fill"></i>

If you prefer not to use npm for installing Bootstrap icons, you can find alternative methods here:

Answer №3

When you add a package to your project using npm, it simply downloads the package files to the node_modules directory. To make use of the package, you'll need to configure your project to import the necessary files.

In the case of an icons library, you may already have a stylesheet that works when included via CDN in your HTML file.

If you're working with Angular, try importing the bootstrap-icons.css file into your project's styles.css file. Locate the bootstrap-icons folder within node_modules and find the corresponding CSS file within its structure.

Based on my local installation, the path is: 

node_modules/bootstrap-icons/font/bootstrap-icons.css

To ensure the icons display correctly, add the following import statement in your styles.css file:

@import '~bootstrap-icons/font/bootstrap-icons.css';

If the icons are still not showing up, double-check the file path for bootstrap-icons.css to ensure it is correct and accessible.

For a live example, you can view this implementation hosted on stackblitz: https://stackblitz.com/edit/angular-bootstrap-icons?file=src%2Fstyles.css,src%2Fapp%2Fapp.component.html

Answer №4

Dealing with the same problem, I found a solution. Once I added the icon CSS file to my style.css, everything started working flawlessly.

Answer №5

To simplify things, you can just incorporate the CDN version directly into your index.html file.

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="fe9c91918a8d8a8c9f8ed3979d91fecfd0cfcfd0cc">[email protected]</a>/font/bootstrap-icons.min.css">

Then, within your components:

<i class="bi bi-xbox"></i>

Answer №6

If you have just made the leap to Angular 17, follow these steps:

  1. Execute 
    npm install bootstrap-icons --save
  2. In the styles.css file, add 
    @import 'bootstrap-icons/font/bootstrap-icons.min.css';

Note: Many online resources suggest using @import '~bootstrap-icons/font/bootstrap-icons.min.css'; (with the tilde), but this method is now considered deprecated.

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

Limiting ng-repeat in AngularJS when the last item on the object is reached

I have a large object being repeated using ng-repeat, and it runs smoothly on Chrome and Opera. However, when it comes to browsers like Mozilla and IE, the performance is very slow. I tried implementing pagination, which helped speed things up, but ideally ...

javascripthtmlangularjsangularjs-ng-repeat

Using jquery to create HTML elements but unable to remove them using jquery

I'm facing an issue with removing newly created li elements in an unordered list using jQuery. The delete button works perfectly fine for the existing li, but not for the ones added dynamically. <!DOCTYPE html> <html lang="en> <head> ...

jqueryhtml

My current setup includes Node.js version 8.11.2 and Angular CLI version 7.1.2. However, upon running Angular CLI 8.0+, it displays an error stating "You are running version v8.11.2 of Node.js, which is not supported

From the beginning of my project, I encountered a version error which led me to uninstall and delete all Node and CLI files before reinstalling them. However, now when I try to run npm start, I am faced with the following message: The current Node.js vers ...

angularnpmcommand-line-interface

Setting the CSS position to fixed for a dynamically generated canvas using JavaScript

My goal is to fix the position style of the canvas using JavaScript in order to eliminate scroll bars. Interestingly, I can easily change the style using Chrome Inspector with no issues, but when it comes to implementing it through JS, I face difficulties. ...

javascriptcsshtmlcanvas

The embedded iframe on YouTube is displaying the incorrect video

I am currently designing a website and I want to feature a video on the homepage. The video is hosted on YouTube and I need to embed it into my website. <html> <iframe width="560" height="315" src="https://www.youtube.com/embed/spPdelVEs_k?rel= ...

javascripthtmlyoutubeembed

What is the best approach for promoting reusability in Angular: creating a new CSS class or a new component?

I have a div with a set of CSS properties that are essential to my application. These properties will be reused across multiple pages and components. <div style="display: flex; flex-direction: column; height: 100%"> //inner html will vary based on c ...

htmlcssangularangular8

Incorporating a dynamic fill effect into an SVG pie chart

I am looking to animate a pie chart with a variable value that is unknown upon loading. Assuming I fetch the value promptly and convert it into a rounded percentage : var percentage = Math.round(sum * 100 / total); Next, I place this value here : <di ...

javascriptjqueryhtmlcsssvg

Store a new JSON item in the localStorage

Currently, I am tackling a task in Angular where the objective is to store items to be purchased in localStorage before adding them to the cart. There are four distinct objects that users can add, and an item can be added multiple times. The rule is to ch ...

javascriptarraysjsonangularlocal-storage

Transitioning a codebase from @angular-builders/custom-webpack to NX for project optimization

I need help migrating my Angular project from using "@angular-builders/custom-webpack" build targets to transitioning to an integrated NX monorepo. When I run the command npx nx@latest init --integrated, I receive the following warning: Unsupported build ...

angulartypescriptwebpacknrwl-nxangular-builder

Preventing Paste Function in Electron Windows

Currently, I am utilizing Electron and attempting to prevent users from pasting into editable content. While paste and match style remains enabled, the functionality is flawless on Mac devices. However, there seems to be an issue on Windows where regular ...

javascripthtmlcssnpmelectron

Encountered an issue with Angular while trying to import scss variables: Module parse failed due to an unexpected token at

Our project previously utilized a palette for importing styles, which functioned correctly in Angular 13. However, upon upgrading to Angular 14, the palette no longer works as expected. Below are the specific details of the issue: Error: Module parse faile ...

angulartypescriptwebpacksass

Modify the bootstrap form dynamically in response to the user's input. Update the form layout instantly as the user types, with no need for clicking any buttons

Imagine a scenario where, as soon as you enter your credit card number, the form automatically undergoes a change without requiring a button click, similar to how a credit card logo pops up. The form detects changes instantly after the input field has be ...

javascripthtmlangularjsnode.jstwitter-bootstrap-3

Exploring the usage of arrays within Angular 4 components. Identifying and addressing overlooked input

I'm struggling with array declaration and string interpolation in Angular 4 using TypeScript. When I define the following classes: export class MyArrayProperty { property1: string; property2: string; } export class MyComponent { @Input() object: ...

htmlarraysjsonangulartypescript

What is the best way to incorporate a YouTube video into my HTML webpage?

Looking to add some YouTube links to my webpage - I'm a complete newbie and clueless about formats and embedding. Can someone guide me on what to use and how to insert it into my HTML code? Appreciate any help! ...

htmlyoutubeembedded-video

What is the best way to ensure that my image completely occupies the div?

I am facing a challenge in creating a hero image that would completely fill the div on my webpage. Despite setting the width and height to 100%, the image seems to only occupy half of the space. Check out the CSS and HTML code snippet here. div.hero{ ...

javascripthtmlcss

Feeling trapped during the process of setting up a intricate jQuery Image Slider

I've hit a roadblock while trying to make changes to the slider located at THIS URL. In the current setup, each thumbnail corresponds to one main display image. Clicking on a thumbnail displays a single image and then proceeds to slide to the next th ...

javascriptjquerycsshtml

The error message "ERR_CONNECTION_TIMED_OUT when trying to access Google APIs fonts

Upon deploying my web project on the client server, I encountered an error and noticed slow page loading. GET https://fonts.googleapis.com/css?family=Source+Sans+Pro:300,400,600,700,300italic,400italic,600italic net::ERR_CONNECTION_TIMED_OUT The browser ...

javascriptjquerycss

Issue with ng-disabled not functioning properly for href tag within list item

Is there a way to prevent clicking on the <a> tag within a list item in a UI list so that the associated <div> is not displayed when clicked (excluding the last list item)? I have attempted using ng-disabled directly on the list item attribute ...

javascripthtmlangularjsangularjs-ng-disabled

"Troubleshooting: Why isn't my Tailwindcss box shadow

I'm currently incorporating Tailwindcss into a React project to recreate the Star Wars website mobile menu. However, I am facing an issue where the box shadow added to the hamburger icon segments is not visible when the navigation drawer is opened. A ...

cssreactjsjsxtailwind-css

Rotating the transform causes the div to be pushed beyond the screen boundaries and renders

html, body { margin: 0; padding: 0; overflow-x: hidden; } /*HEADER*/ #header { background: blue; background-attachment: fixed; background-size: cover; width: 100vw; height: 100vh; } .btn-1, .btn-2, .btn-3 { background ...

htmlcss