mirror of
https://github.com/twbs/bootstrap.git
synced 2025-01-05 23:46:20 +01:00
1299b163c7
* Tweak callout for icon link - no need to talk about `alt` for `<img>` since these don't use `<img>` - make start of sentence more readable * Tweak language of dropdown warning callout * Tweak popover warning callout * Tweak rtl warning callouts * Tweak color warning callout * Add/move accessibility callout for color to relevant pages * Update site/content/docs/5.3/helpers/icon-link.md * Update site/layouts/partials/callouts/warning-color-assistive-technologies.md Co-authored-by: Mark Otto <markd.otto@gmail.com>
67 lines
2.4 KiB
Markdown
67 lines
2.4 KiB
Markdown
---
|
|
layout: docs
|
|
title: Icon link
|
|
description: Quickly create stylized hyperlinks with Bootstrap Icons or other icons.
|
|
group: helpers
|
|
aliases: "/docs/5.3/icon-link/"
|
|
toc: true
|
|
added: 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](https://icons.getbootstrap.com) 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 >}}
|
|
<a class="icon-link" href="#">
|
|
<svg class="bi" aria-hidden="true"><use xlink:href="#box-seam"></use></svg>
|
|
Icon link
|
|
</a>
|
|
{{< /example >}}
|
|
|
|
{{< example >}}
|
|
<a class="icon-link" href="#">
|
|
Icon link
|
|
<svg class="bi" aria-hidden="true"><use xlink:href="#arrow-right"></use></svg>
|
|
</a>
|
|
{{< /example >}}
|
|
|
|
## Style on hover
|
|
|
|
Add `.icon-link-hover` to move the icon to the right on hover.
|
|
|
|
{{< example >}}
|
|
<a class="icon-link icon-link-hover" href="#">
|
|
Icon link
|
|
<svg class="bi" aria-hidden="true"><use xlink:href="#arrow-right"></use></svg>
|
|
</a>
|
|
{{< /example >}}
|
|
|
|
Customize the hover `transform` by overriding the `--bs-icon-link-transform` CSS variable:
|
|
|
|
{{< example >}}
|
|
<a class="icon-link icon-link-hover" style="--bs-icon-link-transform: translate3d(0, -.125rem, 0);" href="#">
|
|
<svg class="bi" aria-hidden="true"><use xlink:href="#clipboard"></use></svg>
|
|
Icon link
|
|
</a>
|
|
{{< /example >}}
|
|
|
|
## Pairs with link utilities
|
|
|
|
Modify icon links with any of [our link utilities]({{< docsref "/utilities/link/" >}}) for modifying underline color and offset.
|
|
|
|
{{< example >}}
|
|
<a class="icon-link icon-link-hover link-success link-underline-success link-underline-opacity-25" href="#">
|
|
Icon link
|
|
<svg class="bi" aria-hidden="true"><use xlink:href="#arrow-right"></use></svg>
|
|
</a>
|
|
{{< /example >}}
|