0
0
mirror of https://github.com/twbs/bootstrap.git synced 2024-12-04 16:24:22 +01:00
Bootstrap/site/content/docs/5.3/helpers/icon-link.md
Louis-Maxime Piton 783213691a
Icon link: envariable + enhance the documentation (#38130)
* Envariable the icon-link helper

* Proposal

* .
2023-03-02 10:32:43 -08:00

3.1 KiB

layout title description group aliases toc added
docs Icon link Quickly create stylized hyperlinks with Bootstrap Icons or other icons. helpers /docs/5.3/icon-link/ true 5.3

The icon link helper component modifies our default link styles to enhance their appearance and quickly align any pairing of icon and text. Alignment is set via inline flexbox styling and a default gap value. We stylize the underline with a custom offset and color. Icons are automatically sized to 1em to best match their associated text's font-size.

Icon links assume Bootstrap Icons are being used, but you can use any icon or image you like.

{{< callout >}} When icons are purely decorative, they should be hidden from assistive technologies using aria-hidden="true", as we've done in our examples. For icons that convey meaning, provide an appropriate text alternative by adding role="img" and an appropriate aria-label="..." to the SVGs. {{< /callout >}}

Example

Take a regular <a> element, add .icon-link, and insert an icon on either the left or right of your link text. The icon is automatically sized, placed, and colored.

{{< example >}} Icon link {{< /example >}}

{{< example >}} Icon link {{< /example >}}

Style on hover

Add .icon-link-hover to move the icon to the right on hover.

{{< example >}} Icon link {{< /example >}}

Customize

Modify the styling of an icon link with our link CSS variables, Sass variables, utilities, or custom styles.

CSS variables

Modify the --bs-link-* and --bs-icon-link-* CSS variables as needed to change the default appearance.

Customize the hover transform by overriding the --bs-icon-link-transform CSS variable:

{{< example >}} Icon link {{< /example >}}

Customize the color by overriding the --bs-link-* CSS variable:

{{< example >}} Icon link {{< /example >}}

Sass

Customize the icon link Sass variables to modify all icon link styles across your Bootstrap-powered project.

{{< scss-docs name="icon-link-variables" file="scss/_variables.scss" >}}

Utilities

Modify icon links with any of [our link utilities]({{< docsref "/utilities/link/" >}}) for modifying underline color and offset.

{{< example >}} Icon link {{< /example >}}