mirror of
https://git.hmsn.ink/kospo/svcm/oa.git
synced 2026-03-20 07:53:48 +09:00
132 lines
2.7 KiB
Markdown
132 lines
2.7 KiB
Markdown
### 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-->
|