skills.rest
sjnims
sjnimsCOMMUNITY
Explore all skills by this author →
GitHub

bootstrap-icons

Integrate Bootstrap Icons via CDN, npm, SVG, or font methods.

Updated Aug 27, 2026
Search Tags:#frontend#icons#svg#cdn#installation#bootstrap#bootstrap-icons
One-click install
npx skills add https://github.com/sjnims/bootstrap-expert --skill bootstrap-icons
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: bootstrap-icons
Source: https://github.com/sjnims/bootstrap-expert/tree/main/plugins/bootstrap-expert/skills/bootstrap-icons
Command: npx skills add https://github.com/sjnims/bootstrap-expert --skill bootstrap-icons

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

Bootstrap projects often struggle to properly include and use Bootstrap Icons, including multiple methods (CDN, npm, SVGs, and font-based usage) and accessibility considerations.

Core Features & Use Cases

  • Multi-method guidance: CDN, npm, inline SVG, and font-based usage.
  • Usage patterns: Icon sizing, coloring, alignment, decorative vs meaningful icons, and accessibility notes.
  • Use Case: Add a heart icon to a signup button, or a navigation icon in a navbar with an appropriate aria-label.

Quick Start

Include Bootstrap Icons via CDN or install via npm, then insert icons like <i class="bi bi-alarm"></i> or <span class="bi bi-alarm" aria-label="Alarm icon"></span>.

Frequently Asked Questions about bootstrap-icons

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I install Bootstrap Icons in my web project?▼

Bootstrap Icons can be installed via CDN by including the stylesheet link in your HTML head, or via npm by installing the package and importing it into your project's build process.

What's the best way to add Bootstrap Icons to HTML elements?▼

Add Bootstrap Icons to HTML elements using the <i class="bi bi-alarm"></i> syntax, or use a <span> tag with the appropriate class and an aria-label for meaningful icons.

Can I use Bootstrap Icons with inline SVG instead of font classes?▼

Yes, Bootstrap Icons supports inline SVG usage, allowing you to embed SVG code directly into your HTML for greater control over icon rendering and styling.

How do I handle accessibility when adding Bootstrap Icons?▼

For accessibility, add aria-label attributes to meaningful icons using <span class="bi bi-alarm" aria-label="Alarm icon"></span>, while decorative icons can be hidden from screen readers.

What are the options for sizing and coloring Bootstrap Icons?▼

Bootstrap Icons can be sized and colored using CSS properties like font-size for dimensions and color for styling, applying standard CSS rules to the icon class selectors.

Does Bootstrap Icons work with frontend frameworks like React or Vue?▼

Bootstrap Icons works with frontend frameworks by installing via npm and importing the package, allowing you to use icon classes within your component templates across HTML, CSS, and JavaScript.

Related Skills

Explore More Software Engineering Skills→
levanminhduclevanminhduc

remix-icon

Implement RemixIcon across webfont, SVG, React, and Vue integrations with ri-{icon-name}-{style} naming conventions.

Community
Basic
majiayu000majiayu000
12

sage-ui-design

Standardize terminal UI alignment, colors, and icons for Sage CLI.

Community
Basic
majesticlabs-devmajesticlabs-dev
47

tailwind-styling

Generate responsive Tailwind CSS styles for React components.

Official
Intermediate
ThinkOodleThinkOodle
5

lucide-icons

Render Lucide icons as inline SVGs in Rails applications.

Official
Basic