@extends('layouts.default')
{{-- Page title --}}
@section('title')
    Icons @parent
@stop
{{-- page level styles --}}
@section('header_styles')
    <!-- page vendors -->
    <!--end of page vendors -->
@stop
@section('content')


    <!-- Content Header (Page header) -->
    <section class="content-header">

        <div aria-label="breadcrumb" class="card-breadcrumb">
            <h1>Icons</h1>
            <ol class="breadcrumb">
                <li class="breadcrumb-item"><a href="#">Content</a></li>
                <li class="breadcrumb-item active" aria-current="page">Icons</li>
            </ol>
        </div>
        <div class="separator-breadcrumb border-top"></div>




    </section>

    <!-- content  start-->
    <section class="content">
        <div class="row">
            <div class="col-md-6">
                <div class="card">
                    <div class="card-header border-bottom">
                        <h5>FontAwesome Icons</h5>
                    </div>
                    <div class="ps-0 d-flex flex-wrap justify-content-around align-items-center">
                        <div class=" clr m-3 " data-bs-toggle="tooltip" data-bs-title="fab fa-500px">
                            <i class="p-2 fa-2x fa-brands fa-500px m-2"></i>
                        </div>
                        <div class="clr m-3 " data-bs-toggle="tooltip" data-bs-title="fa-brands fa-accessible-icon"
                            data-bs-filter="fa-accessible-icon">
                            <i class="p-2 fa-2x fa-brands fa-accessible-icon m-2"></i>
                        </div>
                        <div class="clr  m-3 " data-bs-toggle="tooltip" data-bs-title="fa-brands fa-accusoft">
                            <i class="p-2 fa-2x fa-brands fa-accusoft m-2" data-bs-filter="fa-accusoft"></i>

                        </div>
                        <div class="clr m-3" data-bs-toggle="tooltip"
                            data-bs-title="fa-brands fa-acquisitions-incorporated">
                            <i class="p-2 fa-2x fa-brands fa-twitter m-2"></i>

                        </div>
                        <div class="clr m-3 " data-bs-toggle="tooltip" data-bs-title="fa-solid fa-ad">
                            <i class="p-2 fa-2x fa-solid fa-ad m-2"></i>

                        </div>
                        <div class="clr m-3 " data-bs-toggle="tooltip" data-bs-title="fa-solid fa-address-book">
                            <i class="p-2 fa-2x fa-solid fa-address-book m-2"></i>

                        </div>
                        <div class="clr m-3 " data-bs-toggle="tooltip" data-bs-title="fa-regular fa-address-book">
                            <i class="p-2 fa-2x fa-regular fa-address-book m-2"></i>

                        </div>
                        <div class="clr m-3 " data-bs-toggle="tooltip" data-bs-title="fa-solid fa-address-card">
                            <i class="p-2 fa-2x fa-solid fa-address-card m-2"></i>

                        </div>
                        <div class="clr m-3 " data-bs-toggle="tooltip" data-bs-title="fa-regular fa-address-card">
                            <i class="p-2 fa-2x fa-regular fa-address-card m-2"></i>
                        </div>
                        <div class="clr m-3 " data-bs-toggle="tooltip" data-bs-title="fa-solid fa-adjust">
                            <i class="p-2 fa-2x fa-solid fa-adjust m-2"></i>
                        </div>
                        <div class="clr m-3 " data-bs-toggle="tooltip" data-bs-title="fa-brands fa-adn">
                            <i class="p-2 fa-2x fa-brands fa-adn m-2"></i>
                        </div>
                        <div class="clr m-3 " data-bs-toggle="tooltip" data-bs-title="fa-brands fa-adobe">
                            <i class="p-2 fa-2x fa-brands fa-instagram m-2"></i>
                        </div>
                        <div class="clr m-3 " data-bs-toggle="tooltip" data-bs-title="fa-brands fa-adversal">
                            <i class="p-2 fa-2x fa-brands fa-adversal m-2"></i>

                        </div>
                        <div class="clr m-3 " data-bs-toggle="tooltip" data-bs-title="fa-brands fa-affiliatetheme">
                            <i class="p-2 fa-2x fa-brands fa-affiliatetheme m-2"></i>

                        </div>
                        <div class="clr m-3 " data-bs-toggle="tooltip" data-bs-title="fa-solid fa-air-freshener">
                            <i class="p-2 fa-2x fa-solid fa-air-freshener m-2"></i>

                        </div>
                        <div class="clr m-3 " data-bs-toggle="tooltip" data-bs-title="fa-brands fa-algolia">
                            <i class="p-2 fa-2x fa-brands fa-algolia m-2"></i>

                        </div>
                        <div class="clr m-3 " data-bs-toggle="tooltip" data-bs-title="fa-solid fa-align-center">
                            <i class="p-2 fa-2x fa-solid fa-align-center m-2"></i>
                        </div>
                        <div class="clr m-3 " data-bs-toggle="tooltip" data-bs-title="fa-solid fa-align-justify">
                            <i class="p-2 fa-2x fa-solid fa-align-justify m-2"></i>
                        </div>
                        <div class="clr m-3 " data-bs-toggle="tooltip" data-bs-title="fa-solid fa-align-left">
                            <i class="p-2 fa-2x fa-solid fa-align-left m-2"></i>

                        </div>
                        <div class="clr m-3 " data-bs-toggle="tooltip" data-bs-title="fa-solid fa-align-right">
                            <i class="p-2 fa-2x fa-solid fa-align-right m-2"></i>
                        </div>
                        <div class="clr m-3 " data-bs-toggle="tooltip" data-bs-title="fa-brands fa-alipay">
                            <i class="p-2 fa-2x fa-brands fa-alipay m-2"></i>

                        </div>
                        <div class="clr m-3 " data-bs-toggle="tooltip" data-bs-title="fa-solid fa-allergies">
                            <i class="p-2 fa-2x fa-solid fa-allergies m-2"></i>

                        </div>
                        <div class="clr m-3 " data-bs-toggle="tooltip" data-bs-title="fa-brands fa-amazon">
                            <i class="p-2 fa-2x fa-brands fa-amazon m-2"></i>

                        </div>
                        <div class="clr m-3 " data-bs-toggle="tooltip" data-bs-title="fa-brands fa-amazon-pay">
                            <i class="p-2 fa-2x fa-brands fa-amazon-pay m-2"></i>

                        </div>
                        <div class="clr m-3 " data-bs-toggle="tooltip" data-bs-title="fa-solid fa-ambulance">
                            <i class="p-2 fa-2x fa-solid fa-ambulance m-2"></i>

                        </div>
                        <div class="clr m-3 " data-bs-toggle="tooltip"
                            data-bs-title="fa-solid fa-american-sign-language-interpreting">
                            <i class="p-2 fa-2x fa-solid fa-american-sign-language-interpreting m-2"></i>
                        </div>
                        <div class="clr m-3 " data-bs-toggle="tooltip" data-bs-title="fa-brands fa-amilia">
                            <i class="p-2 fa-2x fa-brands fa-amilia m-2"></i>

                        </div>
                        <div class="clr m-3 " data-bs-toggle="tooltip" data-bs-title="fa-solid fa-anchor">
                            <i class="p-2 fa-2x fa-solid fa-anchor m-2"></i>

                        </div>
                        <div class="clr m-3 " data-bs-toggle="tooltip" data-bs-title="fa-brands fa-android">
                            <i class="p-2 fa-2x fa-brands fa-android m-2"></i>

                        </div>


                    </div>
                    <div class="m-3 mx-auto">
                        <a href="{{ url('fontawesome_icons') }}" class="btn btn-outline-primary">More Icons</a>
                    </div>


                </div>
            </div>
            <div class="col-md-6">
                <div class="card" id="fa-icons">
                    <div class="card-header border-bottom">
                        <h5>IconsMind Icons</h5>
                    </div>

                    <div class="d-flex flex-wrap justify-content-around align-items-center">
                        <div class="clr m-3" data-bs-toggle="tooltip" data-bs-title="im im-icon-A-Z " tabindex="0">
                            <div class="m-2">
                                <i class="im  im-icon-A-Z fs-20"></i>
                            </div>

                        </div>
                        <div class="clr m-3" data-bs-toggle="tooltip" data-bs-title="im im-icon-Aa">
                            <div class="m-2">
                                <i class="im  im-icon-Aa fs-20"></i>
                            </div>
                        </div>
                        <div class="clr m-3" data-bs-toggle="tooltip" data-bs-title="im im-icon-Add-Bag">
                            <div class="m-2">
                                <i class="im  im-icon-Add-Bag fs-20"></i>
                            </div>
                        </div>
                        <div class="clr m-3 " data-bs-toggle="tooltip" data-bs-title="im im-icon-Add-Basket">
                            <div class="m-2">
                                <i class="im  im-icon-Add-Basket fs-20"></i>
                            </div>
                        </div>
                        <div class="clr m-3" data-bs-toggle="tooltip" data-bs-title="im im-icon-Add-Cart">
                            <div class="m-2">
                                <i class="im  im-icon-Add-Cart fs-20"></i>
                            </div>
                        </div>
                        <div class="clr  m-3" data-bs-toggle="tooltip" data-bs-title="im im-icon-Add-File">
                            <div class="m-1">
                                <div class="im  im-icon-Add-File fs-20"></div>
                            </div>
                        </div>
                        <div class="clr  m-3" data-bs-toggle="tooltip"
                            data-bs-title="im im-icon-Add-SpaceAfterParagraph">
                            <div class="m-2">
                                <i class="im  im-icon-Add-SpaceAfterParagraph fs-20"></i>
                            </div>

                        </div>
                        <div class="clr  m-3" data-bs-toggle="tooltip"
                            data-bs-title="im im-icon-Add-SpaceBeforeParagraph">
                            <div class="m-2">
                                <i class="im  im-icon-Add-SpaceBeforeParagraph fs-20"></i>
                            </div>

                        </div>
                        <div class="clr  m-3" data-bs-toggle="tooltip" data-bs-title="im im-icon-Add-User">
                            <div class="m-2 ">
                                <i class="im  im-icon-Add-User fs-20"></i>
                            </div>

                        </div>
                        <div class="clr  m-3" data-bs-toggle="tooltip" data-bs-title="im im-icon-Add-UserStar">
                            <div class="m-2 ">
                                <i class="im  im-icon-Add-UserStar fs-20"></i>
                            </div>

                        </div>
                        <div class="clr  m-3" data-bs-toggle="tooltip" data-bs-title="im im-icon-Add-Window">
                            <div class="m-2 ">
                                <i class="im  im-icon-Add-Window fs-20"></i>
                            </div>

                        </div>
                        <div class="clr  m-3" data-bs-toggle="tooltip" data-bs-title="im im-icon-Add">
                            <div class="m-2 ">
                                <i class="im  im-icon-Add fs-20"></i>
                            </div>

                        </div>
                        <div class="clr  m-3" data-bs-toggle="tooltip" data-bs-title="im im-icon-Address-Book">
                            <div class="m-2 ">
                                <i class="im  im-icon-Address-Book fs-20"></i>
                            </div>

                        </div>
                        <div class="clr  m-3" data-bs-toggle="tooltip" data-bs-title="im im-icon-Address-Book2">
                            <div class="m-2 ">
                                <i class="im  im-icon-Address-Book2 fs-20"></i>
                            </div>

                        </div>
                        <div class="clr  m-3" data-bs-toggle="tooltip" data-bs-title="im im-icon-Administrator">
                            <div class="m-2 ">
                                <i class="im   im-icon-Administrator  fs-20"></i>
                            </div>

                        </div>
                        <div class="clr  m-3" data-bs-toggle="tooltip" data-bs-title="im im-icon-Aerobics-2">
                            <div class="m-2 ">
                                <i class="im  im-icon-Aerobics-2 fs-20"></i>
                            </div>

                        </div>
                        <div class="clr  m-3" data-bs-toggle="tooltip" data-bs-title="im im-icon-Aerobics-3">
                            <div class="m-2 ">
                                <i class="im  im-icon-Aerobics-3 fs-20"></i>
                            </div>

                        </div>
                        <div class="clr  m-3" data-bs-toggle="tooltip" data-bs-title="im im-icon-Aerobics">
                            <div class="m-2 ">
                                <i class="im  im-icon-Aerobics fs-20"></i>
                            </div>

                        </div>
                        <div class="clr  m-3" data-bs-toggle="tooltip" data-bs-title="im im-icon-Affiliate">
                            <div class="m-2 ">
                                <i class="im  im-icon-Affiliate fs-20"></i>
                            </div>

                        </div>
                        <div class="clr  m-3" data-bs-toggle="tooltip" data-bs-title="im im-icon-Aim">
                            <div class="m-2 ">
                                <i class="im  im-icon-Aim fs-20"></i>
                            </div>

                        </div>
                        <div class="clr  m-3" data-bs-toggle="tooltip" data-bs-title="im im-icon-Air-Balloon">
                            <div class="m-2 ">
                                <i class="im  im-icon-Air-Balloon fs-20"></i>
                            </div>

                        </div>
                        <div class="clr  m-3" data-bs-toggle="tooltip" data-bs-title="im im-icon-Airbrush">
                            <div class="m-2 ">
                                <i class="im  im-icon-Airbrush fs-20"></i>
                            </div>

                        </div>
                        <div class="clr  m-3" data-bs-toggle="tooltip" data-bs-title="im im-icon-Airship">
                            <div class="m-2 ">
                                <i class="im  im-icon-Airship fs-20"></i>
                            </div>

                        </div>
                        <div class="clr  m-3" data-bs-toggle="tooltip" data-bs-title="im im-icon-Alarm-Clock">
                            <div class="m-2 ">
                                <i class="im  im-icon-Alarm-Clock fs-20"></i>
                            </div>

                        </div>
                        <div class="clr  m-3" data-bs-toggle="tooltip" data-bs-title="im im-icon-Alarm-Clock2">
                            <div class="m-2 ">
                                <i class="im  im-icon-Alarm-Clock2 fs-20"></i>
                            </div>

                        </div>
                        <div class="clr  m-3" data-bs-toggle="tooltip" data-bs-title="im im-icon-Alarm">
                            <div class="m-2 ">
                                <i class="im  im-icon-Alarm fs-20"></i>
                            </div>

                        </div>
                        <div class="clr  m-3" data-bs-toggle="tooltip" data-bs-title="im im-icon-Alien-2">
                            <div class="m-2 ">
                                <i class="im  im-icon-Alien-2 fs-20"></i>
                            </div>

                        </div>
                        <div class="clr  m-3" data-bs-toggle="tooltip" data-bs-title="im im-icon-Alien">
                            <div class="m-2 ">
                                <i class="im  im-icon-Alien fs-20"></i>
                            </div>

                        </div>
                        <div class="clr  m-3" data-bs-toggle="tooltip" data-bs-title="im im-icon-Aligator">
                            <div class="m-2 ">
                                <i class="im  im-icon-Aligator fs-20"></i>
                            </div>

                        </div>
                        <div class="clr  m-3" data-bs-toggle="tooltip" data-bs-title="im im-icon-Align-Center">
                            <div class="m-2 ">
                                <i class="im  im-icon-Align-Center fs-20"></i>
                            </div>

                        </div>
                    </div>

                    <div class="m-4 mx-auto d-block">
                        <a href="{{ url('iconsmind_icons') }}" class="btn btn-outline-primary">More Icons</a>
                    </div>
                </div>
            </div>

        </div>
    </section>
@stop
@section('footer_scripts')
    <!--   page level js ----------->
    <script src="{{ asset('js/pages/icons.js') }}"></script>
    <!-- end of page level js -->
@stop