<template>
    <div class="container">
        <teleport to="#breadcrumb">
            <ul class="navbar-nav flex-row">
                <li>
                    <div class="page-header">
                        <nav class="breadcrumb-one" aria-label="breadcrumb">
                            <ol class="breadcrumb">
                                <li class="breadcrumb-item active" aria-current="page"><span>Font Icons</span></li>
                            </ol>
                        </nav>
                    </div>
                </li>
            </ul>
        </teleport>

        <div class="container">
            <div class="nav sidenav">
                <div class="sidenav-content" v-scroll-spy-active v-scroll-spy-link>
                    <a href="#font-icon_feather" class="nav-link">Feather</a>
                    <a href="#font-icon_fontawesome" class="nav-link">Font Awesome</a>
                </div>
            </div>

            <div v-scroll-spy>
                <div class="row layout-spacing layout-top-spacing feather-icon">
                    <div id="font-icon_feather" class="col-lg-12">
                        <div class="statbox panel box box-shadow">
                            <div class="panel-body bx-top-6">
                                <div class="icon-section">
                                    <div class="row">
                                        <div class="col-xl-12">
                                            <h4>Feather</h4>

                                            <p class="">
                                                Feather is a collection of simply beautiful open source icons. Each icon is designed on a 24x24 grid with an emphasis on simplicity, consistency and
                                                usability.
                                            </p>

                                            <p class="fs-text">Check --- <a href="https://feathericons.com/" target="_blank" class="icon-link">Feather Icon Offical Website</a></p>
                                        </div>

                                        <div class="icon-content-container">
                                            <div class="row">
                                                <div class="col-auto py-3">
                                                    <div class="icon-container"><i data-feather="activity"></i><span class="icon-name"> activity</span></div>
                                                </div>

                                                <div class="col-auto py-3">
                                                    <div class="icon-container"><i data-feather="airplay"></i><span class="icon-name"> airplay</span></div>
                                                </div>

                                                <div class="col-auto py-3">
                                                    <div class="icon-container"><i data-feather="alert-circle"></i><span class="icon-name"> alert-circle</span></div>
                                                </div>

                                                <div class="col-auto py-3">
                                                    <div class="icon-container"><i data-feather="alert-octagon"></i><span class="icon-name"> alert-octagon</span></div>
                                                </div>

                                                <div class="col-auto py-3">
                                                    <div class="icon-container"><i data-feather="alert-triangle"></i><span class="icon-name"> alert-triangle</span></div>
                                                </div>

                                                <div class="col-auto py-3">
                                                    <div class="icon-container"><i data-feather="align-center"></i><span class="icon-name"> align-center</span></div>
                                                </div>

                                                <div class="col-auto py-3">
                                                    <div class="icon-container"><i data-feather="align-justify"></i><span class="icon-name"> align-justify</span></div>
                                                </div>

                                                <div class="col-auto py-3">
                                                    <div class="icon-container"><i data-feather="align-left"></i><span class="icon-name"> align-left</span></div>
                                                </div>

                                                <div class="col-auto py-3">
                                                    <div class="icon-container"><i data-feather="align-right"></i><span class="icon-name"> align-right</span></div>
                                                </div>

                                                <div class="col-auto py-3">
                                                    <div class="icon-container"><i data-feather="anchor"></i><span class="icon-name"> anchor</span></div>
                                                </div>

                                                <div class="col-auto py-3">
                                                    <div class="icon-container"><i data-feather="aperture"></i><span class="icon-name"> aperture</span></div>
                                                </div>

                                                <div class="col-auto py-3">
                                                    <div class="icon-container"><i data-feather="archive"></i><span class="icon-name"> archive</span></div>
                                                </div>
                                                <div class="col-auto py-3">
                                                    <div class="icon-container"><i data-feather="arrow-down"></i><span class="icon-name"> arrow-down</span></div>
                                                </div>

                                                <div class="col-auto py-3">
                                                    <div class="icon-container"><i data-feather="arrow-down-circle"></i><span class="icon-name"> arrow-down-circle</span></div>
                                                </div>

                                                <div class="col-auto py-3">
                                                    <div class="icon-container"><i data-feather="arrow-down-left"></i><span class="icon-name"> arrow-down-left</span></div>
                                                </div>

                                                <div class="col-auto py-3">
                                                    <div class="icon-container"><i data-feather="arrow-down-right"></i><span class="icon-name"> arrow-down-right</span></div>
                                                </div>

                                                <div class="col-auto py-3">
                                                    <div class="icon-container"><i data-feather="arrow-left"></i><span class="icon-name"> arrow-left</span></div>
                                                </div>

                                                <div class="col-auto py-3">
                                                    <div class="icon-container"><i data-feather="arrow-left-circle"></i><span class="icon-name"> arrow-left-circle</span></div>
                                                </div>

                                                <div class="col-auto py-3">
                                                    <div class="icon-container"><i data-feather="arrow-right"></i><span class="icon-name"> arrow-right</span></div>
                                                </div>

                                                <div class="col-auto py-3">
                                                    <div class="icon-container"><i data-feather="arrow-right-circle"></i><span class="icon-name"> arrow-right-circle</span></div>
                                                </div>

                                                <div class="col-auto py-3">
                                                    <div class="icon-container"><i data-feather="arrow-up"></i><span class="icon-name"> arrow-up</span></div>
                                                </div>

                                                <div class="col-auto py-3">
                                                    <div class="icon-container"><i data-feather="arrow-up-circle"></i><span class="icon-name"> arrow-up-circle</span></div>
                                                </div>

                                                <div class="col-auto py-3">
                                                    <div class="icon-container"><i data-feather="arrow-up-left"></i><span class="icon-name"> arrow-up-left</span></div>
                                                </div>

                                                <div class="col-auto py-3">
                                                    <div class="icon-container"><i data-feather="arrow-up-right"></i><span class="icon-name"> arrow-up-right</span></div>
                                                </div>

                                                <div class="col-auto py-3">
                                                    <div class="icon-container"><i data-feather="at-sign"></i><span class="icon-name"> at-sign</span></div>
                                                </div>

                                                <div class="col-auto py-3">
                                                    <div class="icon-container"><i data-feather="award"></i><span class="icon-name"> award</span></div>
                                                </div>

                                                <div class="col-auto py-3">
                                                    <div class="icon-container"><i data-feather="bar-chart"></i><span class="icon-name"> bar-chart</span></div>
                                                </div>

                                                <div class="col-auto py-3">
                                                    <div class="icon-container"><i data-feather="bar-chart-2"></i><span class="icon-name"> bar-chart-2</span></div>
                                                </div>

                                                <div class="col-auto py-3">
                                                    <div class="icon-container"><i data-feather="battery"></i><span class="icon-name"> battery</span></div>
                                                </div>
                                                <div class="col-auto py-3">
                                                    <div class="icon-container"><i data-feather="battery-charging"></i><span class="icon-name"> battery-charging</span></div>
                                                </div>

                                                <div class="col-auto py-3">
                                                    <div class="icon-container"><i data-feather="bell"></i><span class="icon-name"> bell</span></div>
                                                </div>

                                                <div class="col-auto py-3">
                                                    <div class="icon-container"><i data-feather="bell-off"></i><span class="icon-name"> bell-off</span></div>
                                                </div>

                                                <div class="col-auto py-3">
                                                    <div class="icon-container"><i data-feather="bluetooth"></i><span class="icon-name"> bluetooth</span></div>
                                                </div>

                                                <div class="col-auto py-3">
                                                    <div class="icon-container"><i data-feather="bold"></i><span class="icon-name"> bold</span></div>
                                                </div>

                                                <div class="col-auto py-3">
                                                    <div class="icon-container"><i data-feather="book"></i><span class="icon-name"> book</span></div>
                                                </div>

                                                <div class="col-auto py-3">
                                                    <div class="icon-container"><i data-feather="bookmark"></i><span class="icon-name"> bookmark</span></div>
                                                </div>

                                                <div class="col-auto py-3">
                                                    <div class="icon-container"><i data-feather="book-open"></i><span class="icon-name"> book-open</span></div>
                                                </div>

                                                <div class="col-auto py-3">
                                                    <div class="icon-container"><i data-feather="box"></i><span class="icon-name"> box</span></div>
                                                </div>

                                                <div class="col-auto py-3">
                                                    <div class="icon-container"><i data-feather="briefcase"></i><span class="icon-name"> briefcase</span></div>
                                                </div>

                                                <div class="col-auto py-3">
                                                    <div class="icon-container"><i data-feather="calendar"></i><span class="icon-name"> calendar</span></div>
                                                </div>

                                                <div class="col-auto py-3">
                                                    <div class="icon-container"><i data-feather="camera"></i><span class="icon-name"> camera</span></div>
                                                </div>

                                                <div class="col-auto py-3">
                                                    <div class="icon-container"><i data-feather="camera-off"></i><span class="icon-name"> camera-off</span></div>
                                                </div>

                                                <div class="col-auto py-3">
                                                    <div class="icon-container"><i data-feather="cast"></i><span class="icon-name"> cast</span></div>
                                                </div>

                                                <div class="col-auto py-3">
                                                    <div class="icon-container"><i data-feather="check"></i><span class="icon-name"> check</span></div>
                                                </div>

                                                <div class="col-auto py-3">
                                                    <div class="icon-container"><i data-feather="check-circle"></i><span class="icon-name"> check-circle</span></div>
                                                </div>

                                                <div class="col-auto py-3">
                                                    <div class="icon-container"><i data-feather="check-square"></i><span class="icon-name"> check-square</span></div>
                                                </div>

                                                <div class="col-auto py-3">
                                                    <div class="icon-container"><i data-feather="chevron-down"></i><span class="icon-name"> chevron-down</span></div>
                                                </div>
                                                <div class="col-auto py-3">
                                                    <div class="icon-container"><i data-feather="chevron-left"></i><span class="icon-name"> chevron-left</span></div>
                                                </div>

                                                <div class="col-auto py-3">
                                                    <div class="icon-container"><i data-feather="chevron-right"></i><span class="icon-name"> chevron-right</span></div>
                                                </div>

                                                <div class="col-auto py-3">
                                                    <div class="icon-container"><i data-feather="chevrons-down"></i><span class="icon-name"> chevrons-down</span></div>
                                                </div>

                                                <div class="col-auto py-3">
                                                    <div class="icon-container"><i data-feather="chevrons-left"></i><span class="icon-name"> chevrons-left</span></div>
                                                </div>

                                                <div class="col-auto py-3">
                                                    <div class="icon-container"><i data-feather="chevrons-right"></i><span class="icon-name"> chevrons-right</span></div>
                                                </div>

                                                <div class="col-auto py-3">
                                                    <div class="icon-container"><i data-feather="chevrons-up"></i><span class="icon-name"> chevrons-up</span></div>
                                                </div>

                                                <div class="col-auto py-3">
                                                    <div class="icon-container"><i data-feather="chevron-up"></i><span class="icon-name"> chevron-up</span></div>
                                                </div>

                                                <div class="col-auto py-3">
                                                    <div class="icon-container"><i data-feather="chrome"></i><span class="icon-name"> chrome</span></div>
                                                </div>

                                                <div class="col-auto py-3">
                                                    <div class="icon-container"><i data-feather="clipboard"></i><span class="icon-name"> clipboard</span></div>
                                                </div>

                                                <div class="col-auto py-3">
                                                    <div class="icon-container"><i data-feather="clock"></i><span class="icon-name"> clock</span></div>
                                                </div>

                                                <div class="col-auto py-3">
                                                    <div class="icon-container"><i data-feather="cloud"></i><span class="icon-name"> cloud</span></div>
                                                </div>

                                                <div class="col-auto py-3">
                                                    <div class="icon-container"><i data-feather="cloud-drizzle"></i><span class="icon-name"> cloud-drizzle</span></div>
                                                </div>

                                                <div class="col-auto py-3">
                                                    <div class="icon-container"><i data-feather="cloud-lightning"></i><span class="icon-name"> cloud-lightning</span></div>
                                                </div>

                                                <div class="col-auto py-3">
                                                    <div class="icon-container"><i data-feather="cloud-off"></i><span class="icon-name"> cloud-off</span></div>
                                                </div>

                                                <div class="col-auto py-3">
                                                    <div class="icon-container"><i data-feather="cloud-rain"></i><span class="icon-name"> cloud-rain</span></div>
                                                </div>

                                                <div class="col-auto py-3">
                                                    <div class="icon-container"><i data-feather="cloud-snow"></i><span class="icon-name"> cloud-snow</span></div>
                                                </div>

                                                <div class="col-auto py-3">
                                                    <div class="icon-container"><i data-feather="code"></i><span class="icon-name"> code</span></div>
                                                </div>

                                                <div class="col-auto py-3">
                                                    <div class="icon-container"><i data-feather="codepen"></i><span class="icon-name"> codepen</span></div>
                                                </div>

                                                <div class="col-auto py-3">
                                                    <div class="icon-container"><i data-feather="codesandbox"></i><span class="icon-name"> codesandbox</span></div>
                                                </div>

                                                <div class="col-auto py-3">
                                                    <div class="icon-container"><i data-feather="coffee"></i><span class="icon-name"> coffee</span></div>
                                                </div>

                                                <div class="col-auto py-3">
                                                    <div class="icon-container"><i data-feather="columns"></i><span class="icon-name"> columns</span></div>
                                                </div>

                                                <div class="col-auto py-3">
                                                    <div class="icon-container"><i data-feather="command"></i><span class="icon-name"> command</span></div>
                                                </div>

                                                <div class="col-auto py-3">
                                                    <div class="icon-container"><i data-feather="compass"></i><span class="icon-name"> compass</span></div>
                                                </div>

                                                <div class="col-auto py-3">
                                                    <div class="icon-container"><i data-feather="copy"></i><span class="icon-name"> copy</span></div>
                                                </div>

                                                <div class="col-auto py-3">
                                                    <div class="icon-container"><i data-feather="corner-down-left"></i><span class="icon-name"> corner-down-left</span></div>
                                                </div>

                                                <div class="col-auto py-3">
                                                    <div class="icon-container"><i data-feather="corner-down-right"></i><span class="icon-name"> corner-down-right</span></div>
                                                </div>

                                                <div class="col-auto py-3">
                                                    <div class="icon-container"><i data-feather="corner-left-down"></i><span class="icon-name"> corner-left-down</span></div>
                                                </div>

                                                <div class="col-auto py-3">
                                                    <div class="icon-container"><i data-feather="corner-left-up"></i><span class="icon-name"> corner-left-up</span></div>
                                                </div>

                                                <div class="col-auto py-3">
                                                    <div class="icon-container"><i data-feather="corner-right-down"></i><span class="icon-name"> corner-right-down</span></div>
                                                </div>

                                                <div class="col-auto py-3">
                                                    <div class="icon-container"><i data-feather="corner-right-up"></i><span class="icon-name"> corner-right-up</span></div>
                                                </div>

                                                <div class="col-auto py-3">
                                                    <div class="icon-container"><i data-feather="corner-up-left"></i><span class="icon-name"> corner-up-left</span></div>
                                                </div>

                                                <div class="col-auto py-3">
                                                    <div class="icon-container"><i data-feather="corner-up-right"></i><span class="icon-name"> corner-up-right</span></div>
                                                </div>

                                                <div class="col-auto py-3">
                                                    <div class="icon-container"><i data-feather="cpu"></i><span class="icon-name"> cpu</span></div>
                                                </div>

                                                <div class="col-auto py-3">
                                                    <div class="icon-container"><i data-feather="credit-card"></i><span class="icon-name"> credit-card</span></div>
                                                </div>

                                                <div class="col-auto py-3">
                                                    <div class="icon-container"><i data-feather="crop"></i><span class="icon-name"> crop</span></div>
                                                </div>

                                                <div class="col-auto py-3">
                                                    <div class="icon-container"><i data-feather="crosshair"></i><span class="icon-name"> crosshair</span></div>
                                                </div>

                                                <div class="col-auto py-3">
                                                    <div class="icon-container"><i data-feather="database"></i><span class="icon-name"> database</span></div>
                                                </div>

                                                <div class="col-auto py-3">
                                                    <div class="icon-container"><i data-feather="delete"></i><span class="icon-name"> delete</span></div>
                                                </div>

                                                <div class="col-auto py-3">
                                                    <div class="icon-container"><i data-feather="disc"></i><span class="icon-name"> disc</span></div>
                                                </div>

                                                <div class="col-auto py-3">
                                                    <div class="icon-container"><i data-feather="dollar-sign"></i><span class="icon-name"> dollar-sign</span></div>
                                                </div>

                                                <div class="col-auto py-3">
                                                    <div class="icon-container"><i data-feather="download"></i><span class="icon-name"> download</span></div>
                                                </div>

                                                <div class="col-auto py-3">
                                                    <div class="icon-container"><i data-feather="download-cloud"></i><span class="icon-name"> download-cloud</span></div>
                                                </div>

                                                <div class="col-auto py-3">
                                                    <div class="icon-container"><i data-feather="droplet"></i><span class="icon-name"> droplet</span></div>
                                                </div>

                                                <div class="col-auto py-3">
                                                    <div class="icon-container"><i data-feather="edit"></i><span class="icon-name"> edit</span></div>
                                                </div>

                                                <div class="col-auto py-3">
                                                    <div class="icon-container"><i data-feather="edit-2"></i><span class="icon-name"> edit-2</span></div>
                                                </div>

                                                <div class="col-auto py-3">
                                                    <div class="icon-container"><i data-feather="edit-3"></i><span class="icon-name"> edit-3</span></div>
                                                </div>

                                                <div class="col-auto py-3">
                                                    <div class="icon-container"><i data-feather="external-link"></i><span class="icon-name"> external-link</span></div>
                                                </div>

                                                <div class="col-auto py-3">
                                                    <div class="icon-container"><i data-feather="eye"></i><span class="icon-name"> eye</span></div>
                                                </div>

                                                <div class="col-auto py-3">
                                                    <div class="icon-container"><i data-feather="eye-off"></i><span class="icon-name"> eye-off</span></div>
                                                </div>

                                                <div class="col-auto py-3">
                                                    <div class="icon-container"><i data-feather="facebook"></i><span class="icon-name"> facebook</span></div>
                                                </div>

                                                <div class="col-auto py-3">
                                                    <div class="icon-container"><i data-feather="fast-forward"></i><span class="icon-name"> fast-forward</span></div>
                                                </div>

                                                <div class="col-auto py-3">
                                                    <div class="icon-container"><i data-feather="feather"></i><span class="icon-name"> feather</span></div>
                                                </div>

                                                <div class="col-auto py-3">
                                                    <div class="icon-container"><i data-feather="figma"></i><span class="icon-name"> figma</span></div>
                                                </div>

                                                <div class="col-auto py-3">
                                                    <div class="icon-container"><i data-feather="file"></i><span class="icon-name"> file</span></div>
                                                </div>

                                                <div class="col-auto py-3">
                                                    <div class="icon-container"><i data-feather="file-minus"></i><span class="icon-name"> file-minus</span></div>
                                                </div>

                                                <div class="col-auto py-3">
                                                    <div class="icon-container"><i data-feather="file-plus"></i><span class="icon-name"> file-plus</span></div>
                                                </div>

                                                <div class="col-auto py-3">
                                                    <div class="icon-container"><i data-feather="file-text"></i><span class="icon-name"> file-text</span></div>
                                                </div>

                                                <div class="col-auto py-3">
                                                    <div class="icon-container"><i data-feather="film"></i><span class="icon-name"> film</span></div>
                                                </div>

                                                <div class="col-auto py-3">
                                                    <div class="icon-container"><i data-feather="filter"></i><span class="icon-name"> filter</span></div>
                                                </div>

                                                <div class="col-auto py-3">
                                                    <div class="icon-container"><i data-feather="flag"></i><span class="icon-name"> flag</span></div>
                                                </div>

                                                <div class="col-auto py-3">
                                                    <div class="icon-container"><i data-feather="folder"></i><span class="icon-name"> folder</span></div>
                                                </div>

                                                <div class="col-auto py-3">
                                                    <div class="icon-container"><i data-feather="folder-minus"></i><span class="icon-name"> folder-minus</span></div>
                                                </div>

                                                <div class="col-auto py-3">
                                                    <div class="icon-container"><i data-feather="folder-plus"></i><span class="icon-name"> folder-plus</span></div>
                                                </div>

                                                <div class="col-auto py-3">
                                                    <div class="icon-container"><i data-feather="framer"></i><span class="icon-name"> framer</span></div>
                                                </div>

                                                <div class="col-auto py-3">
                                                    <div class="icon-container"><i data-feather="frown"></i><span class="icon-name"> frown</span></div>
                                                </div>

                                                <div class="col-auto py-3">
                                                    <div class="icon-container"><i data-feather="gift"></i><span class="icon-name"> gift</span></div>
                                                </div>

                                                <div class="col-auto py-3">
                                                    <div class="icon-container"><i data-feather="git-branch"></i><span class="icon-name"> git-branch</span></div>
                                                </div>

                                                <div class="col-auto py-3">
                                                    <div class="icon-container"><i data-feather="git-commit"></i><span class="icon-name"> git-commit</span></div>
                                                </div>

                                                <div class="col-auto py-3">
                                                    <div class="icon-container"><i data-feather="github"></i><span class="icon-name"> github</span></div>
                                                </div>

                                                <div class="col-auto py-3">
                                                    <div class="icon-container"><i data-feather="git-merge"></i><span class="icon-name"> git-merge</span></div>
                                                </div>

                                                <div class="col-auto py-3">
                                                    <div class="icon-container"><i data-feather="git-pull-request"></i><span class="icon-name"> git-pull-request</span></div>
                                                </div>

                                                <div class="col-auto py-3">
                                                    <div class="icon-container"><i data-feather="globe"></i><span class="icon-name"> globe</span></div>
                                                </div>

                                                <div class="col-auto py-3">
                                                    <div class="icon-container"><i data-feather="grid"></i><span class="icon-name"> grid</span></div>
                                                </div>

                                                <div class="col-auto py-3">
                                                    <div class="icon-container"><i data-feather="hard-drive"></i><span class="icon-name"> hard-drive</span></div>
                                                </div>

                                                <div class="col-auto py-3">
                                                    <div class="icon-container"><i data-feather="hash"></i><span class="icon-name"> hash</span></div>
                                                </div>

                                                <div class="col-auto py-3">
                                                    <div class="icon-container"><i data-feather="headphones"></i><span class="icon-name"> headphones</span></div>
                                                </div>

                                                <div class="col-auto py-3">
                                                    <div class="icon-container"><i data-feather="heart"></i><span class="icon-name"> heart</span></div>
                                                </div>

                                                <div class="col-auto py-3">
                                                    <div class="icon-container"><i data-feather="help-circle"></i><span class="icon-name"> help-circle</span></div>
                                                </div>

                                                <div class="col-auto py-3">
                                                    <div class="icon-container"><i data-feather="hexagon"></i><span class="icon-name"> hexagon</span></div>
                                                </div>

                                                <div class="col-auto py-3">
                                                    <div class="icon-container"><i data-feather="home"></i><span class="icon-name"> home</span></div>
                                                </div>

                                                <div class="col-auto py-3">
                                                    <div class="icon-container"><i data-feather="image"></i><span class="icon-name"> image</span></div>
                                                </div>

                                                <div class="col-auto py-3">
                                                    <div class="icon-container"><i data-feather="inbox"></i><span class="icon-name"> inbox</span></div>
                                                </div>

                                                <div class="col-auto py-3">
                                                    <div class="icon-container"><i data-feather="info"></i><span class="icon-name"> info</span></div>
                                                </div>

                                                <div class="col-auto py-3">
                                                    <div class="icon-container"><i data-feather="instagram"></i><span class="icon-name"> instagram</span></div>
                                                </div>

                                                <div class="col-auto py-3">
                                                    <div class="icon-container"><i data-feather="italic"></i><span class="icon-name"> italic</span></div>
                                                </div>

                                                <div class="col-auto py-3">
                                                    <div class="icon-container"><i data-feather="key"></i><span class="icon-name"> key</span></div>
                                                </div>

                                                <div class="col-auto py-3">
                                                    <div class="icon-container"><i data-feather="layers"></i><span class="icon-name"> layers</span></div>
                                                </div>

                                                <div class="col-auto py-3">
                                                    <div class="icon-container"><i data-feather="layout"></i><span class="icon-name"> layout</span></div>
                                                </div>

                                                <div class="col-auto py-3">
                                                    <div class="icon-container"><i data-feather="life-buoy"></i><span class="icon-name"> life-buoy</span></div>
                                                </div>

                                                <div class="col-auto py-3">
                                                    <div class="icon-container"><i data-feather="link"></i><span class="icon-name"> link</span></div>
                                                </div>

                                                <div class="col-auto py-3">
                                                    <div class="icon-container"><i data-feather="link-2"></i><span class="icon-name"> link-2</span></div>
                                                </div>

                                                <div class="col-auto py-3">
                                                    <div class="icon-container"><i data-feather="linkedin"></i><span class="icon-name"> linkedin</span></div>
                                                </div>

                                                <div class="col-auto py-3">
                                                    <div class="icon-container"><i data-feather="list"></i><span class="icon-name"> list</span></div>
                                                </div>

                                                <div class="col-auto py-3">
                                                    <div class="icon-container"><i data-feather="loader"></i><span class="icon-name"> loader</span></div>
                                                </div>

                                                <div class="col-auto py-3">
                                                    <div class="icon-container"><i data-feather="lock"></i><span class="icon-name"> lock</span></div>
                                                </div>

                                                <div class="col-auto py-3">
                                                    <div class="icon-container"><i data-feather="log-in"></i><span class="icon-name"> log-in</span></div>
                                                </div>

                                                <div class="col-auto py-3">
                                                    <div class="icon-container"><i data-feather="log-out"></i><span class="icon-name"> log-out</span></div>
                                                </div>

                                                <div class="col-auto py-3">
                                                    <div class="icon-container"><i data-feather="mail"></i><span class="icon-name"> mail</span></div>
                                                </div>

                                                <div class="col-auto py-3">
                                                    <div class="icon-container"><i data-feather="map"></i><span class="icon-name"> map</span></div>
                                                </div>

                                                <div class="col-auto py-3">
                                                    <div class="icon-container"><i data-feather="map-pin"></i><span class="icon-name"> map-pin</span></div>
                                                </div>

                                                <div class="col-auto py-3">
                                                    <div class="icon-container"><i data-feather="maximize"></i><span class="icon-name"> maximize</span></div>
                                                </div>

                                                <div class="col-auto py-3">
                                                    <div class="icon-container"><i data-feather="maximize-2"></i><span class="icon-name"> maximize-2</span></div>
                                                </div>

                                                <div class="col-auto py-3">
                                                    <div class="icon-container"><i data-feather="meh"></i><span class="icon-name"> meh</span></div>
                                                </div>

                                                <div class="col-auto py-3">
                                                    <div class="icon-container"><i data-feather="menu"></i><span class="icon-name"> menu</span></div>
                                                </div>

                                                <div class="col-auto py-3">
                                                    <div class="icon-container"><i data-feather="message-circle"></i><span class="icon-name"> message-circle</span></div>
                                                </div>

                                                <div class="col-auto py-3">
                                                    <div class="icon-container"><i data-feather="message-square"></i><span class="icon-name"> message-square</span></div>
                                                </div>

                                                <div class="col-auto py-3">
                                                    <div class="icon-container"><i data-feather="mic"></i><span class="icon-name"> mic</span></div>
                                                </div>

                                                <div class="col-auto py-3">
                                                    <div class="icon-container"><i data-feather="mic-off"></i><span class="icon-name"> mic-off</span></div>
                                                </div>

                                                <div class="col-auto py-3">
                                                    <div class="icon-container"><i data-feather="minimize"></i><span class="icon-name"> minimize</span></div>
                                                </div>

                                                <div class="col-auto py-3">
                                                    <div class="icon-container"><i data-feather="minimize-2"></i><span class="icon-name"> minimize-2</span></div>
                                                </div>

                                                <div class="col-auto py-3">
                                                    <div class="icon-container"><i data-feather="minus"></i><span class="icon-name"> minus</span></div>
                                                </div>

                                                <div class="col-auto py-3">
                                                    <div class="icon-container"><i data-feather="minus-circle"></i><span class="icon-name"> minus-circle</span></div>
                                                </div>

                                                <div class="col-auto py-3">
                                                    <div class="icon-container"><i data-feather="minus-square"></i><span class="icon-name"> minus-square</span></div>
                                                </div>

                                                <div class="col-auto py-3">
                                                    <div class="icon-container"><i data-feather="monitor"></i><span class="icon-name"> monitor</span></div>
                                                </div>

                                                <div class="col-auto py-3">
                                                    <div class="icon-container"><i data-feather="moon"></i><span class="icon-name"> moon</span></div>
                                                </div>

                                                <div class="col-auto py-3">
                                                    <div class="icon-container"><i data-feather="more-horizontal"></i><span class="icon-name"> more-horizontal</span></div>
                                                </div>

                                                <div class="col-auto py-3">
                                                    <div class="icon-container"><i data-feather="more-vertical"></i><span class="icon-name"> more-vertical</span></div>
                                                </div>

                                                <div class="col-auto py-3">
                                                    <div class="icon-container"><i data-feather="mouse-pointer"></i><span class="icon-name"> mouse-pointer</span></div>
                                                </div>

                                                <div class="col-auto py-3">
                                                    <div class="icon-container"><i data-feather="move"></i><span class="icon-name"> move</span></div>
                                                </div>

                                                <div class="col-auto py-3">
                                                    <div class="icon-container"><i data-feather="music"></i><span class="icon-name"> music</span></div>
                                                </div>

                                                <div class="col-auto py-3">
                                                    <div class="icon-container"><i data-feather="navigation"></i><span class="icon-name"> navigation</span></div>
                                                </div>

                                                <div class="col-auto py-3">
                                                    <div class="icon-container"><i data-feather="navigation-2"></i><span class="icon-name"> navigation-2</span></div>
                                                </div>

                                                <div class="col-auto py-3">
                                                    <div class="icon-container"><i data-feather="octagon"></i><span class="icon-name"> octagon</span></div>
                                                </div>

                                                <div class="col-auto py-3">
                                                    <div class="icon-container"><i data-feather="package"></i><span class="icon-name"> package</span></div>
                                                </div>

                                                <div class="col-auto py-3">
                                                    <div class="icon-container"><i data-feather="paperclip"></i><span class="icon-name"> paperclip</span></div>
                                                </div>

                                                <div class="col-auto py-3">
                                                    <div class="icon-container"><i data-feather="pause"></i><span class="icon-name"> pause</span></div>
                                                </div>

                                                <div class="col-auto py-3">
                                                    <div class="icon-container"><i data-feather="pause-circle"></i><span class="icon-name"> pause-circle</span></div>
                                                </div>

                                                <div class="col-auto py-3">
                                                    <div class="icon-container"><i data-feather="pen-tool"></i><span class="icon-name"> pen-tool</span></div>
                                                </div>

                                                <div class="col-auto py-3">
                                                    <div class="icon-container"><i data-feather="percent"></i><span class="icon-name"> percent</span></div>
                                                </div>

                                                <div class="col-auto py-3">
                                                    <div class="icon-container"><i data-feather="phone"></i><span class="icon-name"> phone</span></div>
                                                </div>

                                                <div class="col-auto py-3">
                                                    <div class="icon-container"><i data-feather="phone-call"></i><span class="icon-name"> phone-call</span></div>
                                                </div>

                                                <div class="col-auto py-3">
                                                    <div class="icon-container"><i data-feather="phone-forwarded"></i><span class="icon-name"> phone-forwarded</span></div>
                                                </div>

                                                <div class="col-auto py-3">
                                                    <div class="icon-container"><i data-feather="phone-incoming"></i><span class="icon-name"> phone-incoming</span></div>
                                                </div>

                                                <div class="col-auto py-3">
                                                    <div class="icon-container"><i data-feather="phone-missed"></i><span class="icon-name"> phone-missed</span></div>
                                                </div>

                                                <div class="col-auto py-3">
                                                    <div class="icon-container"><i data-feather="phone-off"></i><span class="icon-name"> phone-off</span></div>
                                                </div>

                                                <div class="col-auto py-3">
                                                    <div class="icon-container"><i data-feather="phone-outgoing"></i><span class="icon-name"> phone-outgoing</span></div>
                                                </div>

                                                <div class="col-auto py-3">
                                                    <div class="icon-container"><i data-feather="pie-chart"></i><span class="icon-name"> pie-chart</span></div>
                                                </div>

                                                <div class="col-auto py-3">
                                                    <div class="icon-container"><i data-feather="play"></i><span class="icon-name"> play</span></div>
                                                </div>

                                                <div class="col-auto py-3">
                                                    <div class="icon-container"><i data-feather="play-circle"></i><span class="icon-name"> play-circle</span></div>
                                                </div>

                                                <div class="col-auto py-3">
                                                    <div class="icon-container"><i data-feather="plus"></i><span class="icon-name"> plus</span></div>
                                                </div>

                                                <div class="col-auto py-3">
                                                    <div class="icon-container"><i data-feather="plus-circle"></i><span class="icon-name"> plus-circle</span></div>
                                                </div>

                                                <div class="col-auto py-3">
                                                    <div class="icon-container"><i data-feather="plus-square"></i><span class="icon-name"> plus-square</span></div>
                                                </div>

                                                <div class="col-auto py-3">
                                                    <div class="icon-container"><i data-feather="pocket"></i><span class="icon-name"> pocket</span></div>
                                                </div>

                                                <div class="col-auto py-3">
                                                    <div class="icon-container"><i data-feather="power"></i><span class="icon-name"> power</span></div>
                                                </div>

                                                <div class="col-auto py-3">
                                                    <div class="icon-container"><i data-feather="printer"></i><span class="icon-name"> printer</span></div>
                                                </div>

                                                <div class="col-auto py-3">
                                                    <div class="icon-container"><i data-feather="radio"></i><span class="icon-name"> radio</span></div>
                                                </div>

                                                <div class="col-auto py-3">
                                                    <div class="icon-container"><i data-feather="refresh-ccw"></i><span class="icon-name"> refresh-ccw</span></div>
                                                </div>

                                                <div class="col-auto py-3">
                                                    <div class="icon-container"><i data-feather="refresh-cw"></i><span class="icon-name"> refresh-cw</span></div>
                                                </div>
                                                <div class="col-auto py-3">
                                                    <div class="icon-container"><i data-feather="repeat"></i><span class="icon-name"> repeat</span></div>
                                                </div>

                                                <div class="col-auto py-3">
                                                    <div class="icon-container"><i data-feather="rewind"></i><span class="icon-name"> rewind</span></div>
                                                </div>

                                                <div class="col-auto py-3">
                                                    <div class="icon-container"><i data-feather="rotate-ccw"></i><span class="icon-name"> rotate-ccw</span></div>
                                                </div>

                                                <div class="col-auto py-3">
                                                    <div class="icon-container"><i data-feather="rotate-cw"></i><span class="icon-name"> rotate-cw</span></div>
                                                </div>

                                                <div class="col-auto py-3">
                                                    <div class="icon-container"><i data-feather="rss"></i><span class="icon-name"> rss</span></div>
                                                </div>

                                                <div class="col-auto py-3">
                                                    <div class="icon-container"><i data-feather="save"></i><span class="icon-name"> save</span></div>
                                                </div>

                                                <div class="col-auto py-3">
                                                    <div class="icon-container"><i data-feather="scissors"></i><span class="icon-name"> scissors</span></div>
                                                </div>

                                                <div class="col-auto py-3">
                                                    <div class="icon-container"><i data-feather="search"></i><span class="icon-name"> search</span></div>
                                                </div>

                                                <div class="col-auto py-3">
                                                    <div class="icon-container"><i data-feather="send"></i><span class="icon-name"> send</span></div>
                                                </div>

                                                <div class="col-auto py-3">
                                                    <div class="icon-container"><i data-feather="server"></i><span class="icon-name"> server</span></div>
                                                </div>

                                                <div class="col-auto py-3">
                                                    <div class="icon-container"><i data-feather="settings"></i><span class="icon-name"> settings</span></div>
                                                </div>

                                                <div class="col-auto py-3">
                                                    <div class="icon-container"><i data-feather="share"></i><span class="icon-name"> share</span></div>
                                                </div>

                                                <div class="col-auto py-3">
                                                    <div class="icon-container"><i data-feather="share-2"></i><span class="icon-name"> share-2</span></div>
                                                </div>

                                                <div class="col-auto py-3">
                                                    <div class="icon-container"><i data-feather="shield"></i><span class="icon-name"> shield</span></div>
                                                </div>

                                                <div class="col-auto py-3">
                                                    <div class="icon-container"><i data-feather="shield-off"></i><span class="icon-name"> shield-off</span></div>
                                                </div>

                                                <div class="col-auto py-3">
                                                    <div class="icon-container"><i data-feather="shopping-bag"></i><span class="icon-name"> shopping-bag</span></div>
                                                </div>

                                                <div class="col-auto py-3">
                                                    <div class="icon-container"><i data-feather="shopping-cart"></i><span class="icon-name"> shopping-cart</span></div>
                                                </div>

                                                <div class="col-auto py-3">
                                                    <div class="icon-container"><i data-feather="shuffle"></i><span class="icon-name"> shuffle</span></div>
                                                </div>

                                                <div class="col-auto py-3">
                                                    <div class="icon-container"><i data-feather="sidebar"></i><span class="icon-name"> sidebar</span></div>
                                                </div>

                                                <div class="col-auto py-3">
                                                    <div class="icon-container"><i data-feather="skip-back"></i><span class="icon-name"> skip-back</span></div>
                                                </div>

                                                <div class="col-auto py-3">
                                                    <div class="icon-container"><i data-feather="skip-forward"></i><span class="icon-name"> skip-forward</span></div>
                                                </div>

                                                <div class="col-auto py-3">
                                                    <div class="icon-container"><i data-feather="slack"></i><span class="icon-name"> slack</span></div>
                                                </div>

                                                <div class="col-auto py-3">
                                                    <div class="icon-container"><i data-feather="slash"></i><span class="icon-name"> slash</span></div>
                                                </div>

                                                <div class="col-auto py-3">
                                                    <div class="icon-container"><i data-feather="sliders"></i><span class="icon-name"> sliders</span></div>
                                                </div>

                                                <div class="col-auto py-3">
                                                    <div class="icon-container"><i data-feather="smartphone"></i><span class="icon-name"> smartphone</span></div>
                                                </div>

                                                <div class="col-auto py-3">
                                                    <div class="icon-container"><i data-feather="smile"></i><span class="icon-name"> smile</span></div>
                                                </div>

                                                <div class="col-auto py-3">
                                                    <div class="icon-container"><i data-feather="speaker"></i><span class="icon-name"> speaker</span></div>
                                                </div>

                                                <div class="col-auto py-3">
                                                    <div class="icon-container"><i data-feather="star"></i><span class="icon-name"> star</span></div>
                                                </div>

                                                <div class="col-auto py-3">
                                                    <div class="icon-container"><i data-feather="stop-circle"></i><span class="icon-name"> stop-circle</span></div>
                                                </div>

                                                <div class="col-auto py-3">
                                                    <div class="icon-container"><i data-feather="sun"></i><span class="icon-name"> sun</span></div>
                                                </div>

                                                <div class="col-auto py-3">
                                                    <div class="icon-container"><i data-feather="sunrise"></i><span class="icon-name"> sunrise</span></div>
                                                </div>

                                                <div class="col-auto py-3">
                                                    <div class="icon-container"><i data-feather="sunset"></i><span class="icon-name"> sunset</span></div>
                                                </div>

                                                <div class="col-auto py-3">
                                                    <div class="icon-container"><i data-feather="tablet"></i><span class="icon-name"> tablet</span></div>
                                                </div>

                                                <div class="col-auto py-3">
                                                    <div class="icon-container"><i data-feather="tag"></i><span class="icon-name"> tag</span></div>
                                                </div>

                                                <div class="col-auto py-3">
                                                    <div class="icon-container"><i data-feather="target"></i><span class="icon-name"> target</span></div>
                                                </div>

                                                <div class="col-auto py-3">
                                                    <div class="icon-container"><i data-feather="terminal"></i><span class="icon-name"> terminal</span></div>
                                                </div>

                                                <div class="col-auto py-3">
                                                    <div class="icon-container"><i data-feather="thermometer"></i><span class="icon-name"> thermometer</span></div>
                                                </div>

                                                <div class="col-auto py-3">
                                                    <div class="icon-container"><i data-feather="thumbs-down"></i><span class="icon-name"> thumbs-down</span></div>
                                                </div>

                                                <div class="col-auto py-3">
                                                    <div class="icon-container"><i data-feather="thumbs-up"></i><span class="icon-name"> thumbs-up</span></div>
                                                </div>

                                                <div class="col-auto py-3">
                                                    <div class="icon-container"><i data-feather="toggle-left"></i><span class="icon-name"> toggle-left</span></div>
                                                </div>

                                                <div class="col-auto py-3">
                                                    <div class="icon-container"><i data-feather="toggle-right"></i><span class="icon-name"> toggle-right</span></div>
                                                </div>

                                                <div class="col-auto py-3">
                                                    <div class="icon-container"><i data-feather="trash"></i><span class="icon-name"> trash</span></div>
                                                </div>

                                                <div class="col-auto py-3">
                                                    <div class="icon-container"><i data-feather="trash-2"></i><span class="icon-name"> trash-2</span></div>
                                                </div>

                                                <div class="col-auto py-3">
                                                    <div class="icon-container"><i data-feather="trello"></i><span class="icon-name"> trello</span></div>
                                                </div>

                                                <div class="col-auto py-3">
                                                    <div class="icon-container"><i data-feather="trending-down"></i><span class="icon-name"> trending-down</span></div>
                                                </div>

                                                <div class="col-auto py-3">
                                                    <div class="icon-container"><i data-feather="trending-up"></i><span class="icon-name"> trending-up</span></div>
                                                </div>

                                                <div class="col-auto py-3">
                                                    <div class="icon-container"><i data-feather="triangle"></i><span class="icon-name"> triangle</span></div>
                                                </div>

                                                <div class="col-auto py-3">
                                                    <div class="icon-container"><i data-feather="truck"></i><span class="icon-name"> truck</span></div>
                                                </div>

                                                <div class="col-auto py-3">
                                                    <div class="icon-container"><i data-feather="tv"></i><span class="icon-name"> tv</span></div>
                                                </div>

                                                <div class="col-auto py-3">
                                                    <div class="icon-container"><i data-feather="twitter"></i><span class="icon-name"> twitter</span></div>
                                                </div>

                                                <div class="col-auto py-3">
                                                    <div class="icon-container"><i data-feather="type"></i><span class="icon-name"> type</span></div>
                                                </div>

                                                <div class="col-auto py-3">
                                                    <div class="icon-container"><i data-feather="umbrella"></i><span class="icon-name"> umbrella</span></div>
                                                </div>

                                                <div class="col-auto py-3">
                                                    <div class="icon-container"><i data-feather="underline"></i><span class="icon-name"> underline</span></div>
                                                </div>

                                                <div class="col-auto py-3">
                                                    <div class="icon-container"><i data-feather="unlock"></i><span class="icon-name"> unlock</span></div>
                                                </div>

                                                <div class="col-auto py-3">
                                                    <div class="icon-container"><i data-feather="upload"></i><span class="icon-name"> upload</span></div>
                                                </div>

                                                <div class="col-auto py-3">
                                                    <div class="icon-container"><i data-feather="upload-cloud"></i><span class="icon-name"> upload-cloud</span></div>
                                                </div>

                                                <div class="col-auto py-3">
                                                    <div class="icon-container"><i data-feather="user"></i><span class="icon-name"> user</span></div>
                                                </div>

                                                <div class="col-auto py-3">
                                                    <div class="icon-container"><i data-feather="user-check"></i><span class="icon-name"> user-check</span></div>
                                                </div>

                                                <div class="col-auto py-3">
                                                    <div class="icon-container"><i data-feather="user-minus"></i><span class="icon-name"> user-minus</span></div>
                                                </div>

                                                <div class="col-auto py-3">
                                                    <div class="icon-container"><i data-feather="user-plus"></i><span class="icon-name"> user-plus</span></div>
                                                </div>

                                                <div class="col-auto py-3">
                                                    <div class="icon-container"><i data-feather="users"></i><span class="icon-name"> users</span></div>
                                                </div>

                                                <div class="col-auto py-3">
                                                    <div class="icon-container"><i data-feather="user-x"></i><span class="icon-name"> user-x</span></div>
                                                </div>

                                                <div class="col-auto py-3">
                                                    <div class="icon-container"><i data-feather="video"></i><span class="icon-name"> video</span></div>
                                                </div>

                                                <div class="col-auto py-3">
                                                    <div class="icon-container"><i data-feather="video-off"></i><span class="icon-name"> video-off</span></div>
                                                </div>

                                                <div class="col-auto py-3">
                                                    <div class="icon-container"><i data-feather="voicemail"></i><span class="icon-name"> voicemail</span></div>
                                                </div>

                                                <div class="col-auto py-3">
                                                    <div class="icon-container"><i data-feather="volume"></i><span class="icon-name"> volume</span></div>
                                                </div>

                                                <div class="col-auto py-3">
                                                    <div class="icon-container"><i data-feather="volume-1"></i><span class="icon-name"> volume-1</span></div>
                                                </div>

                                                <div class="col-auto py-3">
                                                    <div class="icon-container"><i data-feather="volume-2"></i><span class="icon-name"> volume-2</span></div>
                                                </div>

                                                <div class="col-auto py-3">
                                                    <div class="icon-container"><i data-feather="volume-x"></i><span class="icon-name"> volume-x</span></div>
                                                </div>

                                                <div class="col-auto py-3">
                                                    <div class="icon-container"><i data-feather="watch"></i><span class="icon-name"> watch</span></div>
                                                </div>

                                                <div class="col-auto py-3">
                                                    <div class="icon-container"><i data-feather="wifi"></i><span class="icon-name"> wifi</span></div>
                                                </div>

                                                <div class="col-auto py-3">
                                                    <div class="icon-container"><i data-feather="wifi-off"></i><span class="icon-name"> wifi-off</span></div>
                                                </div>

                                                <div class="col-auto py-3">
                                                    <div class="icon-container"><i data-feather="wind"></i><span class="icon-name"> wind</span></div>
                                                </div>

                                                <div class="col-auto py-3">
                                                    <div class="icon-container"><i data-feather="x"></i><span class="icon-name"> x</span></div>
                                                </div>

                                                <div class="col-auto py-3">
                                                    <div class="icon-container"><i data-feather="x-circle"></i><span class="icon-name"> x-circle</span></div>
                                                </div>

                                                <div class="col-auto py-3">
                                                    <div class="icon-container"><i data-feather="x-octagon"></i><span class="icon-name"> x-octagon</span></div>
                                                </div>

                                                <div class="col-auto py-3">
                                                    <div class="icon-container"><i data-feather="x-square"></i><span class="icon-name"> x-square</span></div>
                                                </div>

                                                <div class="col-auto py-3">
                                                    <div class="icon-container"><i data-feather="youtube"></i><span class="icon-name"> youtube</span></div>
                                                </div>

                                                <div class="col-auto py-3">
                                                    <div class="icon-container"><i data-feather="zap"></i><span class="icon-name"> zap</span></div>
                                                </div>

                                                <div class="col-auto py-3">
                                                    <div class="icon-container"><i data-feather="zap-off"></i><span class="icon-name"> zap-off</span></div>
                                                </div>

                                                <div class="col-auto py-3">
                                                    <div class="icon-container"><i data-feather="zoom-in"></i><span class="icon-name"> zoom-in</span></div>
                                                </div>

                                                <div class="col-auto py-3">
                                                    <div class="icon-container"><i data-feather="zoom-out"></i><span class="icon-name"> zoom-out</span></div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <!-- Arrows Icons -->

                                <div class="code-section-container show-code">
                                    <button type="button" class="btn btn-default toggle-code-snippet" @click="toggleCode('code1')"><span>Code</span></button>

                                    <div v-if="code_arr.includes('code1')" class="code-section text-start">
                                        <highlight>
                                            <pre>
&lt;!-- Use SVG code directly --&gt;
&lt;svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-activity"&gt;&lt;polyline points="22 12 18 12 15 21 9 3 6 12 2 12"&gt;&lt;/polyline&gt;&lt;/svg&gt;

&lt;!-- OR --&gt;

&lt;!-- Use it inside &lt;i&gt; tag  --&gt;
&lt;i data-feather="activity"&gt;&lt;/i&gt;

&lt;!-- with js code  --&gt;
import feather from 'feather-icons';
mounted() {
    feather.replace();
}
</pre
                                            >
                                        </highlight>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                <div class="row layout-spacing fontawesome">
                    <div id="font-icon_fontawesome" class="col-lg-12">
                        <div class="statbox panel box box-shadow">
                            <div class="panel-body bx-top-6">
                                <div class="icon-section">
                                    <div class="row">
                                        <div class="col-xl-12">
                                            <h4>Fontawesome</h4>
                                            <p class="">Get vector icons and social logos on your website with Font Awesome, the web's most popular icon set and toolkit.</p>
                                            <p class="fs-text">
                                                Download complete fonts library. Check --- <a href="https://fontawesome.com/" target="_blank" class="icon-link">FontAwesome Official Website</a>
                                            </p>
                                        </div>

                                        <div class="icon-content-container">
                                            <div class="row">
                                                <div class="col-auto py-3">
                                                    <div class="icon-container"><i class="far fa-address-book"></i><span class="icon-name"> address-book</span></div>
                                                </div>

                                                <div class="col-auto py-3">
                                                    <div class="icon-container"><i class="far fa-bell"></i><span class="icon-name"> bell</span></div>
                                                </div>

                                                <div class="col-auto py-3">
                                                    <div class="icon-container"><i class="far fa-bookmark"></i><span class="icon-name"> bookmark</span></div>
                                                </div>

                                                <div class="col-auto py-3">
                                                    <div class="icon-container"><i class="far fa-calendar"></i><span class="icon-name"> calendar</span></div>
                                                </div>

                                                <div class="col-auto py-3">
                                                    <div class="icon-container"><i class="far fa-chart-bar"></i><span class="icon-name"> chart-bar</span></div>
                                                </div>

                                                <div class="col-auto py-3">
                                                    <div class="icon-container"><i class="far fa-clipboard"></i><span class="icon-name"> clipboard</span></div>
                                                </div>

                                                <div class="col-auto py-3">
                                                    <div class="icon-container"><i class="far fa-clone"></i><span class="icon-name"> clone</span></div>
                                                </div>

                                                <div class="col-auto py-3">
                                                    <div class="icon-container"><i class="far fa-comment-dots"></i><span class="icon-name"> comment-dots</span></div>
                                                </div>

                                                <div class="col-auto py-3">
                                                    <div class="icon-container"><i class="far fa-compass"></i><span class="icon-name"> compass</span></div>
                                                </div>

                                                <div class="col-auto py-3">
                                                    <div class="icon-container"><i class="far fa-copy"></i><span class="icon-name"> copy</span></div>
                                                </div>

                                                <div class="col-auto py-3">
                                                    <div class="icon-container"><i class="far fa-edit"></i><span class="icon-name"> edit</span></div>
                                                </div>

                                                <div class="col-auto py-3">
                                                    <div class="icon-container"><i class="far fa-envelope"></i><span class="icon-name"> envelope</span></div>
                                                </div>

                                                <div class="col-auto py-3">
                                                    <div class="icon-container"><i class="far fa-eye"></i><span class="icon-name"> eye</span></div>
                                                </div>

                                                <div class="col-auto py-3">
                                                    <div class="icon-container"><i class="far fa-file"></i><span class="icon-name"> file</span></div>
                                                </div>

                                                <div class="col-auto py-3">
                                                    <div class="icon-container"><i class="far fa-flag"></i><span class="icon-name"> flag</span></div>
                                                </div>

                                                <div class="col-auto py-3">
                                                    <div class="icon-container"><i class="far fa-folder"></i><span class="icon-name"> folder</span></div>
                                                </div>

                                                <div class="col-auto py-3">
                                                    <div class="icon-container"><i class="far fa-gem"></i><span class="icon-name"> gem</span></div>
                                                </div>

                                                <div class="col-auto py-3">
                                                    <div class="icon-container"><i class="far fa-heart"></i><span class="icon-name"> heart</span></div>
                                                </div>

                                                <div class="col-auto py-3">
                                                    <div class="icon-container"><i class="far fa-image"></i><span class="icon-name"> image</span></div>
                                                </div>

                                                <div class="col-auto py-3">
                                                    <div class="icon-container"><i class="far fa-map"></i><span class="icon-name"> map</span></div>
                                                </div>

                                                <div class="col-auto py-3">
                                                    <div class="icon-container"><i class="far fa-paper-plane"></i><span class="icon-name">paper-plane</span></div>
                                                </div>

                                                <div class="col-auto py-3">
                                                    <div class="icon-container"><i class="far fa-save"></i><span class="icon-name"> save</span></div>
                                                </div>

                                                <div class="col-auto py-3">
                                                    <div class="icon-container"><i class="far fa-smile"></i><span class="icon-name"> smile</span></div>
                                                </div>

                                                <div class="col-auto py-3">
                                                    <div class="icon-container"><i class="far fa-star"></i><span class="icon-name"> star</span></div>
                                                </div>

                                                <div class="col-auto py-3">
                                                    <div class="icon-container"><i class="far fa-sticky-note"></i><span class="icon-name"> avianex</span></div>
                                                </div>

                                                <div class="col-auto py-3">
                                                    <div class="icon-container"><i class="far fa-times-circle"></i><span class="icon-name"> times-circle</span></div>
                                                </div>

                                                <div class="col-auto py-3">
                                                    <div class="icon-container"><i class="far fa-user"></i><span class="icon-name"> user</span></div>
                                                </div>

                                                <div class="col-auto py-3">
                                                    <div class="icon-container"><i class="far fa-trash-alt"></i><span class="icon-name"> trash-alt</span></div>
                                                </div>

                                                <div class="col-auto py-3">
                                                    <div class="icon-container"><i class="far fa-registered"></i><span class="icon-name"> registered</span></div>
                                                </div>

                                                <div class="col-auto py-3">
                                                    <div class="icon-container"><i class="far fa-keyboard"></i><span class="icon-name"> keyboard</span></div>
                                                </div>

                                                <div class="col-auto py-3">
                                                    <div class="icon-container"><i class="far fa-hourglass"></i><span class="icon-name"> hourglass</span></div>
                                                </div>

                                                <div class="col-auto py-3">
                                                    <div class="icon-container"><i class="far fa-dot-circle"></i><span class="icon-name"> dot-circle</span></div>
                                                </div>

                                                <div class="col-auto py-3">
                                                    <div class="icon-container"><i class="far fa-copyright"></i><span class="icon-name"> copyright</span></div>
                                                </div>

                                                <div class="col-auto py-3">
                                                    <div class="icon-container"><i class="far fa-clock"></i><span class="icon-name"> clock</span></div>
                                                </div>

                                                <div class="col-auto py-3">
                                                    <div class="icon-container"><i class="far fa-building"></i><span class="icon-name"> far fa-building</span></div>
                                                </div>

                                                <div class="col-auto py-3">
                                                    <div class="icon-container"><i class="far fa-file-code"></i><span class="icon-name">file-code</span></div>
                                                </div>

                                                <div class="col-auto py-3">
                                                    <div class="icon-container"><i class="far fa-hdd"></i><span class="icon-name"> HDD</span></div>
                                                </div>

                                                <div class="col-auto py-3">
                                                    <div class="icon-container"><i class="far fa-life-ring"></i><span class="icon-name"> life-ring</span></div>
                                                </div>

                                                <div class="col-auto py-3">
                                                    <div class="icon-container"><i class="far fa-money-bill-alt"></i><span class="icon-name"> money-bill-alt</span></div>
                                                </div>

                                                <div class="col-auto py-3">
                                                    <div class="icon-container"><i class="far fa-lightbulb"></i><span class="icon-name"> lightbulb</span></div>
                                                </div>

                                                <div class="col-auto py-3">
                                                    <div class="icon-container"><i class="far fa-question-circle"></i><span class="icon-name"> question-circle</span></div>
                                                </div>

                                                <div class="col-auto py-3">
                                                    <div class="icon-container"><i class="far fa-square"></i><span class="icon-name"> square</span></div>
                                                </div>

                                                <div class="col-auto py-3">
                                                    <div class="icon-container"><i class="far fa-list-alt"></i><span class="icon-name"> list-alt</span></div>
                                                </div>

                                                <div class="col-auto py-3">
                                                    <div class="icon-container"><i class="far fa-thumbs-up"></i><span class="icon-name"> thumbs-up</span></div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>

                                <div class="code-section-container show-code">
                                    <button type="button" class="btn btn-default toggle-code-snippet" @click="toggleCode('code2')"><span>Code</span></button>

                                    <div v-if="code_arr.includes('code2')" class="code-section text-start">
                                        <highlight>
                                            <pre>
&lt;!-- Use fontawesome with a class on i tag directly --&gt;
&lt;i class="far fa-address-book"&gt;&lt;/i&gt;
</pre
                                            >
                                        </highlight>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<style scoped>
    .feather-icon .icon-section {
        padding: 30px;
    }
    .feather-icon .icon-section h4 {
        color: #3b3f5c;
        font-size: 17px;
        font-weight: 600;
        margin: 0;
        margin-bottom: 16px;
    }
    .feather-icon .icon-content-container {
        padding: 0 16px;
        width: 96%;
        margin: 0 auto;
        border: 1px solid #bfc9d4;
        border-radius: 6px;
    }
    .feather-icon .icon-section p.fs-text {
        padding-bottom: 30px;
        margin-bottom: 30px;
    }
    .feather-icon .icon-container {
        cursor: pointer;
    }
    .feather-icon .icon-container svg {
        color: #3b3f5c;
        margin-right: 6px;
        vertical-align: middle;
        width: 19px;
        height: 19px;
        fill: rgba(0, 23, 55, 0.08);
    }
    .feather-icon .icon-container:hover svg {
        color: #4361ee;
        fill: rgba(27, 85, 226, 0.23921568627450981);
    }
    .feather-icon .icon-container span {
        display: none;
    }
    .feather-icon .icon-container:hover span {
        color: #4361ee;
    }
    .feather-icon .icon-link {
        color: #4361ee;
        font-weight: 600;
        font-size: 14px;
    }

    /*FAB*/
    .fontawesome .icon-section {
        padding: 30px;
    }
    .fontawesome .icon-section h4 {
        color: #3b3f5c;
        font-size: 17px;
        font-weight: 600;
        margin: 0;
        margin-bottom: 16px;
    }
    .fontawesome .icon-content-container {
        padding: 0 16px;
        width: 96%;
        margin: 0 auto;
        border: 1px solid #bfc9d4;
        border-radius: 6px;
    }
    .fontawesome .icon-section p.fs-text {
        padding-bottom: 30px;
        margin-bottom: 30px;
    }
    .fontawesome .icon-container {
        cursor: pointer;
        height: 20px;
        width: 20px;
    }
    .fontawesome .icon-container i {
        font-size: 20px;
        color: #3b3f5c;
        vertical-align: middle;
        margin-right: 10px;
    }
    .fontawesome .icon-container:hover i {
        color: #4361ee;
    }
    .fontawesome .icon-container span {
        color: #888ea8;
        display: none;
    }
    .fontawesome .icon-container:hover span {
        color: #4361ee;
    }
    .fontawesome .icon-link {
        color: #4361ee;
        font-weight: 600;
        font-size: 14px;
    }
</style>

<script setup>
    import { onMounted, ref } from 'vue';

    import '@/assets/sass/scrollspyNav.scss';
    import '@/assets/sass/font-icons/fontawesome/css/regular.css';
    import '@/assets/sass/font-icons/fontawesome/css/fontawesome.css';
    import highlight from '@/components/plugins/highlight.vue';
    import feather from 'feather-icons';

    import { useMeta } from '@/composables/use-meta';
    useMeta({ title: 'Font Icons' });

    const code_arr = ref([]);

    onMounted(() => {
        feather.replace();
    });

    const toggleCode = (name) => {
        if (code_arr.value.includes(name)) {
            code_arr.value = code_arr.value.filter((d) => d != name);
        } else {
            code_arr.value.push(name);
        }
    };
</script>
