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

Embed the WordPress header file outside of the WordPress platform

Recently diving into the world of WordPress, I am eager to integrate the WordPress header file into my PHP file in order to display the identical header as seen on the WordPress site. I am exploring potential methods to achieve this as I work on creating ...

phphtmlcss

What are some ways to accomplish this task without relying on a photo editing tool?

Is it possible to swap the image link: with this new link: without having to use a photo editor? Below is the CSS and HTML code: I was unable to upload the logo due to the restriction of needing at least 10 reputation points in order to post more t ...

javascriptjqueryhtmlcss

Sort data by checking either multiple or single checkbox options in AngularJS; if none are selected, display all results

My goal is to implement a filter in my AngularJS code that will filter data based on selected checkboxes. If no checkbox is selected, all results should be displayed without any filtering. Currently, the issue I am facing is that the data is only displayed ...

javascripthtmlangularjsfilter

What is the best way to ensure that decimal numbers are shown in the right locale number format by default in an Ionic/Angular app

I am currently working on an Ionic/Angular application that frequently requires the display of decimal numbers on its pages. The LOCALE_ID in my app is set to "cs", so I expect numbers to be displayed using this locale. Ideally, "1,000.23" would display as ...

angularionic-frameworkformat

Ways to eliminate the blue selection box when dragging canvas objects in fabric framework

I've been trying to find a solution to remove the annoying blue highlight box that appears when dragging on the canvas while using fabric js, but so far I haven't had any luck. I've tried the following code, but it only works for text and n ...

javascriptjqueryhtmlcssfabricjs

Can a local HTML page be embedded within another?

Suppose I have two HTML pages: index.html and embed.html. Within embed.html, there is an arbitrary HTML page that I want to embed inside index.html. I attempted the following: <!DOCTYPE html> <html lang="en"> <head> <me ...

htmlcssiframe

What causes the iframe to protrude beyond the bottom of the page when set to 100% height?

I am facing an issue with an iframe on my website that is contained within a div. I have specified both to have a height of 100%, and I am using the blueprint framework, hence applying the class span-12 last. Despite these settings, a scroll bar still appe ...

cssiframehtml

Conditional text-boxes can be added to table columns based on certain conditions

I am working with a table that has three columns: type, 1st type, and 2nd type. The type column contains a button which toggles between two values, Db and Cr. I need to dynamically add a text box to the 1st type column when the button's value is Db, a ...

jqueryhtmltextboxhtml-tabletoggle

Options presented in a horizontal line for convenient and quick

I need help with making my menu items responsive so they stay in one line without overlapping as the screen size decreases. Here is the code snippet I am currently using: <!doctype html> <html lang="en"> <head> <meta charset="utf-8 ...

htmlcssbootstrap-5

Building a card carousel component in Vue JS

Struggling with creating a unique card slider using Vue JS? After exploring npm packages like Vue Carousel 3D and Vue Slick, I haven't found the ideal slider for my project. My specific card slider setup is showcased below: In this design, there are ...

javascriptcssvue.jsslider

Positioning two divs side by side, with two more below in the following row

I am attempting to align multiple div elements with a width relative to the screen size. However, when I try to float them next to each other, they shift to the right and display under each other. I have experimented with applying display: inline-block; a ...

htmlcss

Is there a way to stop these symbols (♈♉♊♋♌♍♎♏♐♑♒♓) from being substituted with emojis?

I am currently working on a project involving the simulation of the Prague Astronomical Clock (). My goal is to display the glyphs representing signs of the zodiac, which are in the Unicode range U+263C-2653 along with other astronomical symbols. My prefe ...

cssfonts

The licensed Angular Google Map component is failing to display the map

I've been experimenting with the new Google Map component developed by the Angular Team (from the package @angular/google-maps) with the help of this insightful tutorial. Unfortunately, I'm facing an issue where the map isn't being displaye ...

javascriptangulargoogle-maps

What is the best way to include interactive text on an image?

Just starting to learn html and could use some quick guidance. I have this image here: I would like to place clickable text on the image that links to different pages when clicked, similar to this example: How can I add clickable text over an image and c ...

htmlcss

What is the best way to navigate to another Angular page when the window width is less than 800 pixels?

I have developed an Angular 8 application that showcases a table with numerous columns. When the window size is reduced, I want to switch to a layout displaying fewer columns that can be expanded vertically to show additional information. I have already ...

angularroutesresponsive

Command line functionality to eliminate comments in HTML minifier

I am interested in utilizing html-minifier to compress my html documents. After executing the command npm install -g html-minifier, I have successfully installed it. However, the command sudo html-minifier rb.html --removeComments did not eliminate comme ...

htmlnpmminify

Injecting CSS styles into a webpage using a Chrome extension before the page has completely loaded to achieve instant customization

As a newcomer to creating Chrome (or other browser) extensions, I am working on developing one that applies custom CSS rules to specific page elements. Overall, it seems to be functioning as intended, but with some minor issues. One issue I have encounter ...

javascripthtmlcssbrowsergoogle-chrome-extension

Drop and drag the spotlight

On my website, I am looking to implement a feature that will make it easier for users to identify the drag and drop area. I found a code snippet on JSFIDDLE that works perfectly there. However, when I tried to use it on my local server, it doesn't se ...

javascriptjqueryhtmlcss

Comparing Angular i18n JSON files automatically for consistency checks

Within my Angular application, I am working with two translation files: en.json and xx.json. While the standard practice is to create translations in both files for a multilanguage application, some developers may only add translations to one file when tes ...

jsonangularinternationalizationwebstormangular-i18n

In Angular 12, the button click should only proceed once a method with an HTTP call has finished executing

Users can input multiple search criteria into the form and initiate a search operation by clicking the search button. Some of the fields in the search criteria form are dropdowns. Choosing a value from a dropdown triggers an API call to retrieve a specifi ...

angularasynchronoussearch