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
1
vote
1 answer

Using background image css for bootstrap icons

This is my HTML: Test And this is my css: .chevron-right::before { display: inline-block; content: ""; background-image: url("data:image/svg+xml,
SunnyPenguin
  • 137
  • 4
  • 15
1
vote
2 answers

Bootstrap Icon Fading

I'm wondering how to display the filled version of a bootstrap icon when I hover over it. I have this code: …
user14174815
0
votes
0 answers

woff-files from library not ending up in dist-folder

I've built an angular component library in which I use bootstrap-icons. In the same NX workspace there's an application where I'm using this component, and this works fine: The woff-files from bootstrap-icons end up in the application dist-folder.…
Pieterjan
  • 2,738
  • 4
  • 28
  • 55
0
votes
0 answers

Any ways to make a element perfectly proportionated with Bootstrap icons

I've been tryna make a website, I use bootstrap icons library for my icons and I've been going throught a problem that doesn't seems to be fixable. I cannot find any answers on StackOverflow or Google (or any other websites). The thing is that…
ClassyCrafter
  • 3
  • 4
0
votes
0 answers

Electron builder - how to include Bootstrap icons and access files into build correctly

I've created a simple Electron and Vue app that will have bootstrap 5.3.0 and bootstrap icons as dependency. During the serve mode of vue Electron cli plugin the serve mode will load all the needed assets without problems, but after I build the app,…
newbiedev
  • 2,607
  • 3
  • 17
  • 65
0
votes
0 answers

bootstrap-icons not showing in deployed angular app

I have an angular app that works correctly in my development environment but once deployed on IIS the bootstrap icons are not displayed. I used the following command to install the package: npm i bootstrap-icons Here 's the relevant section of my…
Amokachi
  • 103
  • 7
0
votes
0 answers

How to add Icons to TYPO3 bootstrap package

tI have bootstrap_package 11 and I want to add TikTok to the social media channels. What I did so far: In my Site Package i added the following to constants.typoscript: page { theme { socialmedia enable = 1 channels { facebook…
Robert Hufsky
  • 131
  • 3
  • 16
0
votes
0 answers

Grapesjs Block got resetted everytime i change class

I'm trying to create a custom plugin for GrapesJS but I'm having some issues with it. This plugin will add custom block with type bootstrapIcon, when i double click the component icon picker modal will show up then i can choose what icon i want. The…
user3026767
  • 1
0
votes
1 answer

How can I colorize component in nuxt

I use bootstrap-vue in my nuxt project and bootstrap-vue-icons for icons. Everything works nicely, but I can't colorize my icons. Plugin import: import Vue from 'vue' import { BootstrapVue, BootstrapVueIcons } from…
sed9xa
  • 1
  • 1
0
votes
1 answer

Does laravel 9 supports bootstrap 5 icons?

This is my composer.json file of laravel 9 project "devDependencies": { "@popperjs/core": "^2.11.6", "axios": "^1.1.2", "bootstrap": "^5.2.3", "bootstrap-icons": "^1.10.3", "laravel-vite-plugin": "^0.7.2", …
Ganesh Adhikari
  • 1
  • 2
0
votes
1 answer

how includes only a few icons from bootstrap-icons?

how could I includes only a few icons from the bootstrap-icons project? I have added the project to my dependencies (yarn add bootstrap-icons) and searching in it I can see that it has a sass file with a giant map variable "$bootstrap-icons-map" I…
jon_eldiablo
  • 188
  • 2
  • 10
0
votes
1 answer

Bootstrap icons with background colour

I'm using bootstrap icons (the webfont, not the svg). I want to apply a background to the icon, contained within its edges. But the colour is applied to the entire element. For example:
lonix
  • 14,255
  • 23
  • 85
  • 176
0
votes
1 answer

How to vertically align navbar link when used with icon that is larger than default?

Using Bootstrap 5 with Bootstrap Icons, I also enlarged the icon using font-size:1.5rem;, but that broke the vertical alignment for the links (If you remove the styling you can see it's working again, need to be in Full Page mode) I could not find…
pileup
  • 1
  • 2
  • 18
  • 45
0
votes
0 answers

How can I fix an unexpected output of the icons I used in a website?

I was building a barbershop website design using HTML, CSS, Bootstrap and JS, and I used Bootstrap icons to make a better look of some of its elements. Everything was going well concerning how I needed all the icons that I used from the first…
Abdel Ben
  • 1
0
votes
1 answer

How to center a bootsrap icon inside of a circle container

I'm trying to create a circular border around an icon. So that it looks similar to the design. I can center the icon when it's not inside of the container but as soon as I put the round container around the icon it doesn't stay central. Any…
Jac Phillipps
  • 31
  • 9
1
2
3