PHPackages                             webfer/custom\_bootstrap\_icon\_font - PHPackages - PHPackages  [Skip to content](#main-content)[PHPackages](/)[Directory](/)[Categories](/categories)[Trending](/trending)[Leaderboard](/leaderboard)[Changelog](/changelog)[Analyze](/analyze)[Collections](/collections)[Log in](/login)[Sign up](/register)

1. [Directory](/)
2. /
3. [Utility & Helpers](/categories/utility)
4. /
5. webfer/custom\_bootstrap\_icon\_font

ActiveDrupal-module[Utility & Helpers](/categories/utility)

webfer/custom\_bootstrap\_icon\_font
====================================

Drupal module that generates a custom WOFF2 icon font from a selected subset of Bootstrap Icons and publishes matching CSS classes.

1.2.0(2mo ago)129GPL-2.0-or-laterPHP

Since Feb 16Pushed 3mo agoCompare

[ Source](https://github.com/webfer/custom_bootstrap_icon_font)[ Packagist](https://packagist.org/packages/webfer/custom_bootstrap_icon_font)[ Docs](https://github.com/webfer/custom_bootstrap_icon_font)[ RSS](/packages/webfer-custom-bootstrap-icon-font/feed)WikiDiscussions main Synced 1mo ago

READMEChangelog (10)Dependencies (2)Versions (20)Used By (0)

Custom Bootstrap Icon Font (Bootstrap Icons → WOFF2) for Drupal
===============================================================

[](#custom-bootstrap-icon-font-bootstrap-icons--woff2-for-drupal)

A Drupal module that generates a custom icon font (WOFF2 + optional WOFF) from a selected subset of Bootstrap Icons, and publishes matching CSS classes.

🚀 **Why?** Keep your frontend lightweight: instead of shipping the entire Bootstrap Icons set, you can select only the icons your site actually uses (for example, 100 icons) and generate a small, focused font + CSS just for those.

---

📦 Module Overview
-----------------

[](#-module-overview)

- **Name**: Custom Bootstrap Icon Font
- **Package**: Custom
- **Compatibility**: Drupal 10, 11

This module:

- Provides an admin page to select icons and configure the build.
- Builds the font either via Drush (recommended) or via a UI button (handy for local/dev).
- Writes generated assets to `public://custom_bootstrap_icon_font/font/`.
- Automatically attaches the generated CSS on the frontend (only if it exists).
- Provides Twig helpers to render icon markup.

### Key features

[](#key-features)

- Select icons by name, by class, or by pasted HTML snippets
    - Accepts lines like `arrow-right-circle-fill`, `bi-arrow-right-circle-fill`, `bi bi-arrow-right-circle-fill`, or ``.
- Stable glyph codepoints across rebuilds
    - Codepoints are stored in config so previously-used icons keep the same Unicode value when re-added.
- Bootstrap-like CSS output
    - Generates a small CSS file that maps `.di-` to a glyph via `::before { content: "\\e001"; }`.
- Composer/CI friendly
    - Bootstrap Icons live in `web/libraries/bootstrap-icons/icons`.
    - Fantasticon is installed at the project level (or globally) and executed via Drush.

---

🛠 Installation
--------------

[](#-installation)

### ✅ Install with Composer (recommended) 🧰

[](#-install-with-composer-recommended-)

From your Drupal project root:

```
composer require webfer/custom_bootstrap_icon_font
```

Composer will install the module into your Drupal codebase (commonly under `web/modules/contrib/` in standard Drupal Composer templates). 📦

Then enable the module:

- 📍 **Admin > Extend** → enable **Custom Bootstrap Icon Font**, or
- 💻 `drush en custom_bootstrap_icon_font -y`

### 🧩 Install without Composer (development only)

[](#-install-without-composer-development-only)

If you’re developing locally, you can still place the module folder under:

- `web/modules/custom/custom_bootstrap_icon_font`

---

✅ Requirements
--------------

[](#-requirements)

### Drupal

[](#drupal)

- Drupal core 10/11.
- Ability to write to `public://` (this module stores generated assets under `public://custom_bootstrap_icon_font/`).

### Bootstrap Icons SVG sources

[](#bootstrap-icons-svg-sources)

The build needs access to the Bootstrap Icons SVG files (`*.svg`).

Recommended location (Drupal libraries):

- `web/libraries/bootstrap-icons/icons`

You can install Bootstrap Icons there by either:

- Downloading the last release from  and extracting to `web/libraries/bootstrap-icons`, or
- Using a build/CI step to fetch it.

### Node tooling (required for building assets)

[](#node-tooling-required-for-building-assets)

Asset generation uses Fantasticon, typically via `npx fantasticon`.

You need:

- `node`, `npm`, `npx`
- Fantasticon available to the same environment that runs `drush`.

Tip 💡: If you plan to build from the admin UI (“Save and build now”), the same Node tooling must also be available to the PHP/web user, and the request must be allowed to run long enough.

Recommended (project-level, deterministic):

```
cd /path/to/project/root  # the folder you run drush from

# Only needed if you don't already have a root package.json.
npm init -y

npm install --save-dev fantasticon

# Verify it is available without prompting/downloading.
npx --no-install fantasticon --version
```

Alternative (global install):

```
npm install -g fantasticon
fantasticon --version
```

Important:

- If Fantasticon is not installed locally/globally, `npx fantasticon` may try to download it interactively (not suitable for non-interactive servers/CI).
- If you use Yarn or pnpm, install Fantasticon in your project and set `generator_command` accordingly.

---

⚙ Configuration
---------------

[](#-configuration)

### 1) Permissions

[](#1-permissions)

The admin UI requires:

- **Permission**: `administer custom bootstrap icon font`

Assign it under **People > Permissions**.

### 2) Build / update the font

[](#2-build--update-the-font)

Go to:

- **Admin path**: `/admin/config/media/bootstrap-icon-font`

On this page you can:

- Enter one Bootstrap icon name per line (example: `arrow-right-circle-fill`).
- Names may include or omit the `bi-` prefix; it is normalized automatically.
- You can also paste full HTML snippets and the module will extract the icon name automatically (example: ``).
- Pick a `font_name` (the `font-family` name used in CSS).
- Configure where Bootstrap Icons live (`icons_source_dir`).
- Configure the generator command (`generator_command`).

### ✅ Build assets (two options)

[](#-build-assets-two-options)

#### Option A: Build from the UI (friendly) 🖱️

[](#option-a-build-from-the-ui-friendly-️)

1. Click **Save and build now**.
2. The module generates the CSS + font files under `public://custom_bootstrap_icon_font/font/`.

This is great for local/dev. On production, Drush is usually safer (no web timeouts and doesn’t require Node to run during a web request).

#### Option B: Build via Drush (recommended) 🧑‍💻

[](#option-b-build-via-drush-recommended-‍)

```
drush di-font:build
```

Aliases are kept for backwards compatibility:

```
drush custom-bootstrap-icon-font:build
drush ci-font:build
drush cbi-font:build
```

When the build completes, the module:

- Saves the selected icons to config (`custom_bootstrap_icon_font.settings`).
- Maintains a stable `codepoints` mapping so glyphs don’t change between regenerations.
- Writes:
    - `public://custom_bootstrap_icon_font/font/.woff2`
    - `public://custom_bootstrap_icon_font/font/.woff` (optional)
    - `public://custom_bootstrap_icon_font/font/custom-bootstrap-icon-font.css`
- Updates `version` for cache-busting.
- Invalidates render cache.

---

🧩 Usage
-------

[](#-usage)

### Option A: CSS classes (Bootstrap-like)

[](#option-a-css-classes-bootstrap-like)

After generating assets, you can render icons using classes and a pseudo-element:

```

```

Notes:

- The generated CSS includes Bootstrap-icons style selectors:
    - `.di::before, [class^="di-"]::before, [class*=" di-"]::before { ... }`
- The icon is rendered by `::before { content: "\\e001"; }`.

### Option B: Twig helper

[](#option-b-twig-helper)

This module provides:

```
{{ di_font_icon('arrow-right-circle-fill') }}
{{ di_font_icon('youtube', { class: 'text-danger me-2' }) }}
```

Backwards-compatible Twig function names are also available (if you used older templates):

```
{{ ci_font_icon('arrow-right-circle-fill') }}
{{ cbi_font_icon('arrow-right-circle-fill') }}
```

🧱 Fantasticon specification
---------------------------

[](#-fantasticon-specification)

This module is a thin wrapper around the Fantasticon CLI.

### Inputs

[](#inputs)

- **Icons list**: stored in `custom_bootstrap_icon_font.settings:icons`
- **Source directory**: stored in `custom_bootstrap_icon_font.settings:icons_source_dir`
    - Default: `libraries/bootstrap-icons/icons` (relative to `DRUPAL_ROOT`)
- **Generator command**: stored in `custom_bootstrap_icon_font.settings:generator_command`
    - Default: `npx fantasticon`
    - Note: it is split on whitespace (simple tokenization). If you need complex quoting, use a small wrapper script and point `generator_command` at it.

### Generated Fantasticon config

[](#generated-fantasticon-config)

During `drush di-font:build`, the module stages the selected SVGs into a temporary folder and generates a Fantasticon JSON config equivalent to:

```
{
  "name": "",
  "inputDir": "/icons",
  "outputDir": "/custom_bootstrap_icon_font/font",
  "fontTypes": ["woff2", "woff"],
  "assetTypes": [],
  "codepoints": {
    "arrow-right-circle-fill": 57345
  }
}
```

Important details:

- `codepoints` are provided explicitly to keep glyphs stable between builds.
- Only the currently selected icons are emitted into the font/CSS, but the module keeps a historical mapping in config so re-adding an icon later can reuse the same codepoint.

### Outputs

[](#outputs)

Files written to `public://custom_bootstrap_icon_font/font/`:

- `.woff2`
- `.woff` (optional fallback)
- `custom-bootstrap-icon-font.css` (uses relative `./.woff2?v=` URLs)

---

🎨 Styling
---------

[](#-styling)

Because this is a font:

- Icon color is controlled by `color`.
- Icon size is controlled by `font-size`.

Example:

```
.di,
[class^='di-'],
[class*=' di-'] {
  color: currentColor;
}
```

---

🚨 Troubleshooting
-----------------

[](#-troubleshooting)

- **“Icon not found: …”**

    - Confirm the icon exists in your Bootstrap Icons version. Example: `youtube.svg` should exist.
    - Ensure the configured `icons_source_dir` exists (recommended: `web/libraries/bootstrap-icons/icons`).
- **Build fails**

    - Ensure Node.js + npm + npx are installed.
    - Ensure Fantasticon is available on PATH (or set `generator_command` accordingly).
    - Run the build from the same environment where `drush` runs.
    - If you use the UI build, confirm the web/PHP user can run the generator command and that the request won’t time out.
- **I clicked “Save configuration” but nothing was generated**

    - That button only saves settings.
    - To generate the CSS + fonts, click **Save and build now** (or run `drush di-font:build`).
- **CSS loads but icons show as empty squares**

    - Font files are missing or blocked. Check the network tab for `.woff2`.
    - Confirm the CSS and fonts are in the same directory (so relative `./.woff2` resolves).
- **Icons changed after regeneration**

    - Stable glyphs require stable codepoints. This module stores `codepoints` in config; avoid deleting that config between runs.

---

📂 File Structure
----------------

[](#-file-structure)

```
custom_bootstrap_icon_font/
├── composer.json
├── LICENSE
├── custom_bootstrap_icon_font.info.yml
├── custom_bootstrap_icon_font.module
├── custom_bootstrap_icon_font.routing.yml
├── custom_bootstrap_icon_font.permissions.yml
├── custom_bootstrap_icon_font.links.menu.yml
├── custom_bootstrap_icon_font.services.yml
├── custom_bootstrap_icon_font.libraries.yml
├── drush.services.yml
├── css/
│   └── custom_bootstrap_icon_font.admin.css
├── config/
│   ├── install/
│   │   └── custom_bootstrap_icon_font.settings.yml
│   └── schema/
│       └── custom_bootstrap_icon_font.schema.yml
└── src/
    ├── Commands/
    │   └── CustomBootstrapIconFontCommands.php
    ├── Form/
    │   └── CustomBootstrapIconFontGenerateForm.php
    ├── Helper/
    │   └── CustomBootstrapIconFontHelper.php
  ├── Service/
  │   └── CustomBootstrapIconFontBuilder.php
    └── Twig/
        └── CustomBootstrapIconFontTwigExtension.php

```

---

📜 License
---------

[](#-license)

This project is licensed under the **GNU General Public License, version 2 or (at your option) any later version**.

- SPDX identifier: `GPL-2.0-or-later`
- Created by: WebFer

---

\_Created and maintained by [WebFer](https://www.linkedin.com/in/webfer/)

###  Health Score

38

—

LowBetter than 85% of packages

Maintenance83

Actively maintained with recent releases

Popularity11

Limited adoption so far

Community6

Small or concentrated contributor base

Maturity43

Maturing project, gaining track record

 Bus Factor1

Top contributor holds 100% of commits — single point of failure

How is this calculated?**Maintenance (25%)** — Last commit recency, latest release date, and issue-to-star ratio. Uses a 2-year decay window.

**Popularity (30%)** — Total and monthly downloads, GitHub stars, and forks. Logarithmic scaling prevents top-heavy scores.

**Community (15%)** — Contributors, dependents, forks, watchers, and maintainers. Measures real ecosystem engagement.

**Maturity (30%)** — Project age, version count, PHP version support, and release stability.

###  Release Activity

Cadence

Every ~1 days

Total

16

Last Release

75d ago

### Community

Maintainers

![](https://www.gravatar.com/avatar/f49cee4bc55d0961424e647398c602b6a34fcb2c1430f46dcb268e3b66b26100?d=identicon)[WebFer](/maintainers/WebFer)

---

Top Contributors

[![webfer](https://avatars.githubusercontent.com/u/25346182?v=4)](https://github.com/webfer "webfer (11 commits)")

---

Tags

drupaliconsbootstrapfontfont-awesomeBootstrap Iconswoff2drupal-module

### Embed Badge

![Health badge](/badges/webfer-custom-bootstrap-icon-font/health.svg)

```
[![Health](https://phpackages.com/badges/webfer-custom-bootstrap-icon-font/health.svg)](https://phpackages.com/packages/webfer-custom-bootstrap-icon-font)
```

###  Alternatives

[twbs/bootstrap-icons

Official open source SVG icon library for Bootstrap

7.9k2.0M56](/packages/twbs-bootstrap-icons)[kartik-v/bootstrap-star-rating

A simple yet powerful JQuery star rating plugin for Bootstrap.

1.1k4.5M5](/packages/kartik-v-bootstrap-star-rating)[mervick/material-design-icons

Google Material Design Icons For Using With Bootstrap

10191.4k7](/packages/mervick-material-design-icons)[swissup/module-font-awesome

FontAwesome for Magento2

116.9k1](/packages/swissup-module-font-awesome)

PHPackages © 2026

[Directory](/)[Categories](/categories)[Trending](/trending)[Changelog](/changelog)[Analyze](/analyze)