or run

npx @tessl/cli init
Log in

Version

Tile

Overview

Evals

Files

docs

css-font.mdindex.mdsvg-files.mdsvg-sprite.md
tile.json

css-font.mddocs/

CSS Font Integration

Bootstrap Icons provides a comprehensive icon font system with CSS classes for easy integration into any HTML project. The font system includes optimized web fonts (WOFF/WOFF2) and complete CSS mappings for all 2,078 icons.

Capabilities

CSS File Inclusion

Include Bootstrap Icons CSS in your project using one of the available stylesheets.

/* Main CSS file (98KB) */
@import "node_modules/bootstrap-icons/font/bootstrap-icons.css";

/* Minified CSS file (85KB) */  
@import "node_modules/bootstrap-icons/font/bootstrap-icons.min.css";

/* SCSS file (58KB) */
@import "node_modules/bootstrap-icons/font/bootstrap-icons.scss";

HTML Link Tag:

<!-- CDN -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.13.1/font/bootstrap-icons.css" rel="stylesheet">

<!-- Local installation -->
<link href="node_modules/bootstrap-icons/font/bootstrap-icons.css" rel="stylesheet">
<link href="node_modules/bootstrap-icons/font/bootstrap-icons.min.css" rel="stylesheet">

Font Face Declaration

The CSS includes a font-face declaration that loads the Bootstrap Icons font files.

@font-face {
  font-display: block;
  font-family: "bootstrap-icons";
  src: url("./fonts/bootstrap-icons.woff2?e34853135f9e39acf64315236852cd5a") format("woff2"),
       url("./fonts/bootstrap-icons.woff?e34853135f9e39acf64315236852cd5a") format("woff");
}

Font Files:

  • bootstrap-icons.woff2 (131KB) - Modern WOFF2 format
  • bootstrap-icons.woff (177KB) - Legacy WOFF format

Base Icon Styles

All icon classes inherit from base styles that configure font rendering and appearance.

.bi::before,
[class^="bi-"]::before,
[class*=" bi-"]::before {
  display: inline-block;
  font-family: bootstrap-icons !important;
  font-style: normal;
  font-weight: normal !important;
  font-variant: normal;
  text-transform: none;
  line-height: 1;
  vertical-align: -.125em;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

Individual Icon Classes

Each icon has a corresponding CSS class that maps to its Unicode character in the font.

/* Sample icon classes */
.bi-alarm::before { content: "\f102"; }
.bi-alarm-fill::before { content: "\f101"; }
.bi-house-door::before { content: "\f4c6"; }
.bi-house-door-fill::before { content: "\f4c7"; }
.bi-gear::before { content: "\f3e5"; }
.bi-bootstrap::before { content: "\f17b"; }
.bi-check-circle::before { content: "\f26d"; }
.bi-x-circle::before { content: "\f659"; }
/* ... 2,070 more icon classes */

HTML Usage Patterns

Use Bootstrap Icons in HTML with CSS classes applied to various elements.

<!-- Standard icon elements -->
<i class="bi bi-alarm"></i>
<span class="bi bi-house-door"></span>
<em class="bi bi-gear"></em>

<!-- Button integration -->
<button type="button">
  <i class="bi bi-plus"></i> Add Item
</button>

<!-- List items -->
<ul>
  <li><i class="bi bi-check-circle"></i> Task completed</li>
  <li><i class="bi bi-x-circle"></i> Task failed</li>
</ul>

<!-- Navigation -->
<nav>
  <a href="#"><i class="bi bi-house-door"></i> Home</a>
  <a href="#"><i class="bi bi-person"></i> Profile</a>
  <a href="#"><i class="bi bi-gear"></i> Settings</a>
</nav>

CSS Customization

Customize icon appearance using standard CSS properties.

/* Size customization */
.bi-large {
  font-size: 2rem;
}

.bi-small {
  font-size: 0.75rem;
}

/* Color customization */
.bi-primary {
  color: #007bff;
}

.bi-success {
  color: #28a745;
}

.bi-danger {
  color: #dc3545;
}

/* Custom styling */
.bi-custom {
  color: #6f42c1;
  font-size: 1.5rem;
  margin-right: 0.5rem;
  vertical-align: middle;
}

SCSS Integration

When using SCSS, you can customize the font path and other variables.

// Custom font path (before importing)
$bootstrap-icons-font-src: url("../fonts/bootstrap-icons.woff2") format("woff2"),
                          url("../fonts/bootstrap-icons.woff") format("woff");

// Import Bootstrap Icons SCSS
@import "node_modules/bootstrap-icons/font/bootstrap-icons.scss";

// Custom icon utilities
.icon {
  &-sm { font-size: 0.875rem; }
  &-lg { font-size: 1.25rem; }
  &-xl { font-size: 1.75rem; }
  
  &-muted { color: #6c757d; }
  &-primary { color: #007bff; }
  &-success { color: #28a745; }
}

Framework Integration

Bootstrap 5:

<!-- Bootstrap button with icon -->
<button class="btn btn-primary">
  <i class="bi bi-download"></i> Download
</button>

<!-- Bootstrap input group -->
<div class="input-group">
  <span class="input-group-text">
    <i class="bi bi-search"></i>
  </span>
  <input type="text" class="form-control" placeholder="Search">
</div>

Tailwind CSS:

<!-- Tailwind with Bootstrap Icons -->
<button class="bg-blue-500 text-white px-4 py-2 rounded">
  <i class="bi bi-plus mr-2"></i>Add Item
</button>

Accessibility Considerations

Proper accessibility attributes for screen readers and assistive technologies.

<!-- Decorative icons (hidden from screen readers) -->
<i class="bi bi-star" aria-hidden="true"></i>

<!-- Semantic icons with labels -->
<button>
  <i class="bi bi-trash" aria-hidden="true"></i>
  <span class="visually-hidden">Delete</span>
</button>

<!-- Icons with meaningful content -->
<span>
  <i class="bi bi-check-circle text-success" aria-hidden="true"></i>
  <span>Task completed successfully</span>
</span>

Performance Optimization

Font Loading Optimization:

/* Preload font for better performance */
@font-face {
  font-display: swap; /* Use swap instead of block for faster rendering */
  font-family: "bootstrap-icons";
  src: url("./fonts/bootstrap-icons.woff2") format("woff2"),
       url("./fonts/bootstrap-icons.woff") format("woff");
}

HTML Preload:

<!-- Preload font files -->
<link rel="preload" href="fonts/bootstrap-icons.woff2" as="font" type="font/woff2" crossorigin>

Icon Class Reference

All 2,078 icons follow the .bi-{icon-name} pattern:

Common Categories:

  • UI: .bi-house-door, .bi-gear, .bi-person, .bi-envelope
  • Actions: .bi-plus, .bi-minus, .bi-check, .bi-x, .bi-trash
  • Arrows: .bi-arrow-left, .bi-arrow-right, .bi-arrow-up, .bi-arrow-down
  • Media: .bi-play, .bi-pause, .bi-stop, .bi-volume-up
  • Numbers: .bi-1-circle, .bi-2-square-fill, .bi-123
  • Shapes: .bi-circle, .bi-square, .bi-triangle
  • Brands: .bi-bootstrap, .bi-github, .bi-twitter

Font File Details

interface FontFiles {
  woff2: {
    path: "font/fonts/bootstrap-icons.woff2";
    size: "131KB";
    format: "woff2";
    compatibility: "Modern browsers";
  };
  woff: {
    path: "font/fonts/bootstrap-icons.woff";
    size: "177KB"; 
    format: "woff";
    compatibility: "Legacy browser support";
  };
}

interface CSSFiles {
  main: {
    path: "font/bootstrap-icons.css";
    size: "98KB";
    minified: false;
  };
  minified: {
    path: "font/bootstrap-icons.min.css"; 
    size: "85KB";
    minified: true;
  };
  scss: {
    path: "font/bootstrap-icons.scss";
    size: "58KB";
    preprocessor: "Sass/SCSS";
  };
}