d70b5db2e0
* Add new link utilities, update colored link helpers * Remove commented out code * Fixes * Remove examples changes * Fixes and copy * Fix icon-link instances on homepage * Bump bundlewatch * Fix node-sass issue for rgba() function bug * More bundlewatch * One more time after merge * Add callout for a11y * Hover and focus-visible * Add a11y callouts * Remove duplicate for now * More code review feedback
2.5 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 >}}
Icons used here are likely to be purely decorative, which means they should be hidden from assistive technologies using aria-hidden="true", as we've done in our examples. For icons that are more than decorative, provide an appropriate text alternative via alt for <img> elements role="img" and aria-label for 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 the hover transform by overriding the --bs-icon-link-transform CSS variable:
{{< example >}} Icon link {{< /example >}}
Pairs with link utilities
Modify icon links with any of [our link utilities]({{< docsref "/utilities/link/" >}}) for modifying underline color and offset.
{{< example >}} Icon link {{< /example >}}