first

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

@@ -0,0 +1,131 @@
+### 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.
+
+<!--code-->
+
+```vue
+<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>
+```
+
+<!--/code-->
+
+<!--example-->
+
+<div class="is-flex is-gap-0.5 is-flex-wrap-wrap is-align-items-flex-end">
+    <VIconBox size="medium" color="primary" rounded>
+        <i class="fas fa-atom"></i>
+    </VIconBox>
+    <VIconBox size="medium" color="info" rounded>
+        <i class="fas fa-birthday-cake"></i>
+    </VIconBox>
+    <VIconBox size="medium" color="success" rounded>
+        <i class="fas fa-leaf"></i>
+    </VIconBox>
+    <VIconBox size="medium" color="warning" rounded>
+        <i class="fas fa-bolt"></i>
+    </VIconBox>
+    <VIconBox size="medium" color="danger" rounded>
+        <i class="fas fa-ankh"></i>
+    </VIconBox>
+    <VIconBox size="medium" color="purple" rounded>
+        <i class="fas fa-bell"></i>
+    </VIconBox>
+    <VIconBox size="medium" color="yellow" rounded>
+        <i class="fab fa-bitcoin"></i>
+    </VIconBox>
+    <VIconBox size="medium" color="orange" rounded>
+        <i class="fas fa-bowling-ball"></i>
+    </VIconBox>
+    <VIconBox size="medium" color="green" rounded>
+        <i class="fas fa-fan"></i>
+    </VIconBox>
+    <VIconBox size="medium" color="red" rounded>
+        <i class="fas fa-envelope-open"></i>
+    </VIconBox>
+    <VIconBox size="medium" color="blue" rounded>
+        <i class="fas fa-briefcase-medical"></i>
+    </VIconBox>
+</div>
+
+<!--/example-->