Bootstrap Icons Laravel Package

aliases:

• /font/

Install

Bootstrap Icons are published to npm, but they can also be manually downloaded if needed.

{{< highlight sh >}} npm i bootstrap-icons {{< /highlight >}} {{< highlight sh >}} composer require twbs/bootstrap-icons {{< /highlight >}} {{< /md >}}

Download latest ZIP {{< /md >}}

{{< highlight html >}}

{{< highlight css >}} @import url("https://cdn.jsdelivr.net/npm/bootstrap-icons@{{< param version >}}/font/bootstrap-icons.min.css"); {{< /highlight >}} {{< /md >}}

Usage

Bootstrap Icons are SVGs, so you can include them into your HTML in a few ways depending on how your project is setup. We recommend using a width: 1em (and optionally height: 1em) for easy resizing via font-size.

Heads up! There's an issue with Chrome where <use> doesn't work across domains. {{< /md >}}

Use font-size and color to change the icon appearance. {{< /md >}}

Heads up! This is currently required for Vite and Parcel as their Sass compilers aren‘t happy with relative URLs. {{< /md >}}

// Import the Sass files as usual @import "bootstrap-icons/font/bootstrap-icons";

{{< /highlight >}}

The viewBox attribute is required if you wish to resize icons with background-size. Note that the xmlns attribute is required. {{< /md >}}

{{< /highlight >}}

• SVGs receive focus by default in Internet Explorer and Edge Legacy. When embedding your SVGs, add focusable="false" to the <svg> element. Learn more on Stack Overflow.

• When using SVGs with <img> elements, screen readers may not announce them as images, or skip the image completely. Include an additional role="img" on the <img> element to avoid any issues. See this article for details.

• External SVG sprites may not function correctly in Internet Explorer. Use the svg4everybody polyfill as needed.

Found another issue with SVGs we should note? Please open [an issue]({{< param repo >}}/issues) to share details. {{< /md >}}