Stack Overflow
Stack Overflow

Questions tagged [bootstrap-icons]

Use this tag for questions involving the usage of the official open source library of SVG icons for Bootstrap. While designed for Bootstrap first, these icons can work in just about any project, and even with other UI frameworks.

Bootstrap Icons

Official open source SVG icon library for Bootstrap.

Bootstrap Logo

Bootstrap Icons are designed to work with Bootstrap components, from form controls to navigation. But, they'll work in just about any project, too. That's because Bootstrap Icons are SVGs, so they scale quickly and easily and can be styled with CSS.

They're open sourced (MIT), so you're free to download, use, and extend any icon. Every SVG can be copied from right here, or you can use the SVG sprite.

Official page : https://icons.getbootstrap.com/
Install : https://icons.getbootstrap.com/#install
Usage : https://icons.getbootstrap.com/#usage
Github Repo : https://github.com/twbs/icons

45 questions
14
votes
5 answers

Change accordion button collapsed icon color in Bootstrap 5

I am trying to change the Bootstrap 5's accordion's "accordion-button" color when it is collapsed. I tried below. It changes the background but not the button's icon color. .accordion-button.collapsed { color: white; background:…
Ajay Kumar
  • 2,906
  • 3
  • 23
  • 46
7
votes
3 answers

Is there a Font available for the new Bootstrap Icons?

Coming from Font Awesome I'd like to use the new Bootstrap Icons in my web project. Unfortunately the inclusion of Bootstrap Icons seems way more tedious in regard to the amount of code I have to insert. What I'm looking for: Take for example the…
jor
  • 2,058
  • 2
  • 26
  • 46
6
votes
3 answers

Is it possible to @import bootstrap icons in the scss file and use it via @extend in other scss classes?

Is it possible to import and extend the bootstrap-icons.css in the scss file like importing the bootstrap.scss? What I've tried so far without success: @import "../node_modules/bootstrap-icons/font/bootstrap-icons"; .right-square-icon{ font-size:…
th_lo
  • 461
  • 3
  • 18
5
votes
4 answers

Bootstrap5 icons font-weight

I recently updated to bootstrap 5 directly from 3. Yes, I skipped 4. Thing is, back in 3, I used to do something like this. Now, with bootstrap5's icons,…
onzinsky
  • 541
  • 1
  • 6
  • 21
4
votes
4 answers

I want to incorporate bootstrap-icons in an angular project but it is not working

I want to implement bootstrap-icons in an angular project but it is not working. I ran the following command, npm i bootstrap-icons But I am unable to add icons in the web page with icon fonts. For now, I have added the bootstrap icon CDN in…
Swaraj Behera
  • 41
  • 1
  • 3
3
votes
0 answers

If this is a native custom element, make sure to exclude it from component resolution via compilerOptions.isCustomElement

I'm clueless about an error message that keeps coming back. I'm transforming my existing Vue2 codebase to Vue3. I'm also ditching the existing icon package as it is incompatible with Vue 2. Instead I'm now using…
Erhnam
  • 901
  • 2
  • 13
  • 23
2
votes
1 answer

Unsorted icon stack using bootstrap-icons

I'm using bootstrap-icons, which does not yet have an "unsorted" icon like this: So I'd like to stack two separate icons to achieve that effect:
lonix
  • 14,255
  • 23
  • 85
  • 176
2
votes
3 answers

Can't put bootstrap Icon into web.css file

I am trying to add a bootstrap icon at the end of all my dropbtns, so I wanted to do that in my css file. I am able to add their icons directly in the web page like but I have been unable to get it to work in…
Del
  • 61
  • 6
1
vote
0 answers

Bootstrap icons disappear in small devices

I have the next structure, there are 3 href where i included 3 bootstrap icons, the problem is that in extra small devices the 3 icons disappear.
Alan Jair Almaguer
  • 11
  • 1
1
vote
2 answers

why is the bootstrap icon not changing its size?

Here's the code:
1
vote
2 answers

How can I use code point of Bootstrap Icons?

Summary of the problem The following image is a description of bootstrap icon. I don't know how to use "Code point". Unicode: U+F120 CSS: \F120 JS: \uF120 HTML: 
Kitamado
  • 224
  • 2
  • 9
1
vote
3 answers

Bootstrap icons and Webpack 5 - You may need an appropriate loader to handle this file type

I'm having a lot of trouble getting bootstrap icons to work with webpack: Getting the following: ERROR in ./node_modules/bootstrap-icons/font/bootstrap-icons.css 1:0 Module parse failed: Unexpected character '@' (1:0) You may need an appropriate…
Isidoro
  • 385
  • 5
  • 15
1
vote
3 answers

How can I use SVG in React Native?

I am trying to use bootstrap icons in react native and I can't find any useful methods on how to render an SVG in react-native. Does anyone know how to?
Senor Coder
  • 63
  • 1
  • 5
1
vote
2 answers

Laravel + Bootstrap Icons

I added bootstrap-icons to my Laravel 8 project via command line npm i bootstrap-icons I had already run before npm install and npm run dev to enable Laravel/UI. But when I try to insert a simple icon , it is not…
Franz7
  • 11
  • 1
  • 2
1
vote
3 answers

Resize SVG bootstrap icon

Is it possible to resize a bootstrap icon in CSS? The icons are SVG. I am adding the icon in HTML, not via CSS.
rigyt
  • 2,219
  • 3
  • 28
  • 40
1
2 3