← ClaudeAtlas

bootstrap-iconslisted

This skill should be used when the user asks about Bootstrap Icons, Bootstrap icon library, how to install Bootstrap Icons, how to use Bootstrap Icons, Bootstrap icon fonts, Bootstrap icon SVGs, Bootstrap icon sprites, Bootstrap Icons CDN, Bootstrap Icons npm, Bootstrap Icons Composer, PHP Bootstrap Icons, Laravel icons, external image icons, img tag icons, CSS background icons, CSS mask icons, how to style Bootstrap icons, Bootstrap icon sizing, Bootstrap icon colors, Bootstrap icon accessibility, or needs help using icons in Bootstrap projects.
ronnieiscoo/bootstrap-expert · ★ 0 · Web & Frontend · score 63
Install: claude install-skill ronnieiscoo/bootstrap-expert
# Bootstrap Icons Bootstrap Icons is an official open-source icon library with over 2,000 icons designed to work with Bootstrap components and documentation. **Current Version**: 1.13.x (check <https://icons.getbootstrap.com> for latest) ## Installation Methods ### CDN (Quickest) ```html <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.13.1/font/bootstrap-icons.min.css" integrity="sha384-CK2SzKma4jA5H/MXDUU7i1TqZlCFaD4T01vtyDFvPlD97JQyS+IsSh1nI2EFbpyk" crossorigin="anonymous"> ``` ### npm ```bash npm install bootstrap-icons ``` Then import: ```scss // In SCSS @import "bootstrap-icons/font/bootstrap-icons.css"; ``` ```javascript // In JavaScript import 'bootstrap-icons/font/bootstrap-icons.css'; ``` ### Download Download from <https://icons.getbootstrap.com> and include files locally. ### Composer (PHP) For PHP projects using Composer: ```bash composer require twbs/bootstrap-icons ``` Then reference icons from the vendor directory: ```php // Laravel Blade example <img src="{{ asset('vendor/twbs/bootstrap-icons/icons/heart.svg') }}" alt="Heart"> // Symfony Twig example <img src="{{ asset('bundles/bootstrap-icons/icons/heart.svg') }}" alt="Heart"> ``` ## Usage Methods ### Icon Fonts (Recommended for Most Cases) Icon fonts are the simplest method for most projects: - **Easy syntax**: Just add `<i class="bi bi-*"></i>` - **Automatic sizing**: Icons scale with surrounding text - **Color inheritance**: Icons use the parent's `color` pr