oa/documentation/icon-box/icon-box-fa-documentation.md

Font Awesome

The Vuero <VIconBox /> component works also very well with the Font Awesome icon set. Use the same markup and just replace the existing icons with some from Font Awesome.

<template>
  <VIconBox
    size="medium"
    color="primary"
    rounded
  >
    <i class="fas fa-atom" />
  </VIconBox>
  <VIconBox
    size="medium"
    color="info"
    rounded
  >
    <i class="fas fa-birthday-cake" />
  </VIconBox>
  <VIconBox
    size="medium"
    color="success"
    rounded
  >
    <i class="fas fa-leaf" />
  </VIconBox>
  <VIconBox
    size="medium"
    color="warning"
    rounded
  >
    <i class="fas fa-bolt" />
  </VIconBox>
  <VIconBox
    size="medium"
    color="danger"
    rounded
  >
    <i class="fas fa-ankh" />
  </VIconBox>
  <VIconBox
    size="medium"
    color="purple"
    rounded
  >
    <i class="fas fa-bell" />
  </VIconBox>
  <VIconBox
    size="medium"
    color="yellow"
    rounded
  >
    <i class="fab fa-bitcoin" />
  </VIconBox>
  <VIconBox
    size="medium"
    color="orange"
    rounded
  >
    <i class="fas fa-bowling-ball" />
  </VIconBox>
  <VIconBox
    size="medium"
    color="green"
    rounded
  >
    <i class="fas fa-fan" />
  </VIconBox>
  <VIconBox
    size="medium"
    color="red"
    rounded
  >
    <i class="fas fa-envelope-open" />
  </VIconBox>
  <VIconBox
    size="medium"
    color="blue"
    rounded
  >
    <i class="fas fa-briefcase-medical" />
  </VIconBox>
</template>