Icon link

Quickly create stylized hyperlinks with Bootstrap Icons or other icons.

Example

Basic

vue
<template>
 <Anchor
  to="./focus-ring"
  icon="bi:box-seam"
 >
  Icon link
 </Anchor>
</template>

End

vue
<template>
 <b-div>
  <Anchor
   to="https://usebootstrap.org/lang-en/utilities/position"
   icon="bi:arrow-right"
   icon-end
   target="_blank"
  >
   Icon link
  </Anchor>
 </b-div>
 <b-div>
  <Anchor
   to="https://usebootstrap.org/lang-en/utilities/position"
   icon="bi:box-arrow-up-right"
   icon-end
   target="_blank"
  >
   Icon link
  </Anchor>
 </b-div>
</template>

Style on hover

vue
<template>
 <b-div>
  <Anchor
   to="https://usebootstrap.org/lang-en/utilities/position"
   icon="bi:arrow-right"
   icon-end
   icon-hover
   target="_blank"
  >
   Icon link
  </Anchor>
 </b-div>
</template>

Button

vue
<template>
 <Anchor
  to="./focus-ring"
  icon="bi:facebook"
  button
  color="light"
 />
</template>

See Also