boxicons > 자유게시판

https://boxicons.com/usage

<script src="boxicons@2.1.4/dist/boxicons.js"" TARGET="_blank" rel="nofollow">https://unpkg.com/boxicons@2.1.4/dist/boxicons.js"></script>
<box-icon name="rocket"></box-icon>
To use solid icons or logos add attribute type as solid or logo
<box-icon  type="solid" name="rocket"></box-icon>
<box-icon  type="logo" name="facebook-square"></box-icon>

@@ Example

<i class='bx bx-barcode bx-border-circle'></i>

<i class='bx bx-barcode-reader bx-border-circle'></i>

<i class='bx bxs-contact bx-border-circle'></i>

<i class='bx bxs-face bx-border-circle'></i>

<i class='bx bx-bold bx-border-circle'></i>

<i class='bx bx-cube bx-border-circle'></i>

<i class='bx bx-group bx-border-circle'></i>

<i class='bx bx-user-circle bx-border-circle'></i>

<i class='bx bx-command bx-border-circle'></i>

<i class='bx bx-loader-circle bx-border-circle'></i>

<i class='bx bxl-google bx-border-circle'></i>

<ul class='bx-ul'>
    <li><i class='bx bx-right-arrow'></i>List Item 1</li>
    <li><i class='bx bx-x'></i>List Item 2</li>
    <li><i class='bx bx-plus'></i>List Item 3</li>
</ul>

-- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- --

<i class='bx bxs-like bx-rotate-90'></i>
<i class='bx bxs-like bx-rotate-180'></i>
<i class='bx bxs-like bx-rotate-270'></i>
<i class='bx bxs-like bx-flip-horizontal'></i>
<i class='bx bxs-like bx-flip-vertical '></i>
<!-- Boxicons web component -->
<box-icon name='like' rotate='90'></box-icon>
<box-icon name='like' flip='horizontal'></box-icon>
 
<i class='bx bxs-heart bx-border'></i>
<i class='bx bxs-heart bx-border-circle'></i>
<!-- Boxicons web component -->
<box-icon name='heart' border='circle'></box-icon>

<i class='bx bxs-like bx-spin'></i>
<i class='bx bxs-like bx-tada'></i>
<i class='bx bxs-like bx-flashing'></i>
<i class='bx bxs-like bx-burst'></i>
<i class='bx bxs-like bx-fade-left'></i>
<i class='bx bxs-like bx-fade-right'></i>
<i class='bx bxs-like bx-fade-up'></i>
<i class='bx bxs-like bx-fade-down'></i>
<!-- Boxicons web component -->
<box-icon name='bell' animation='tada'></box-icon>
 
<i class='bx bxs-like bx-spin-hover'></i>
<i class='bx bxs-like bx-tada-hover'></i>
<i class='bx bxs-like bx-flashing-hover'></i>
<i class='bx bxs-like bx-burst-hover'></i>
<i class='bx bxs-like bx-fade-left-hover'></i>
<i class='bx bxs-like bx-fade-right-hover'></i>
<i class='bx bxs-like bx-fade-up-hover'></i>
<i class='bx bxs-like bx-fade-down-hover'></i>
<!-- Boxicons web component -->
<box-icon name='bell' animation='tada-hover'></box-icon>
 

<box-icon
 type = "regular|solid|logo"
name="adjust|alarms|etc...."
color="blue|red|etc..."
size="xs|sm|md|lg|cssSize"
rotate="90|180|270"
flip="horizontal|vertical"
border="square|circle"
animation="spin|tada|etc..."
animation="spin|tada|etc..."
pull = "left|right"
></box-icon>