ekoetki/public/template/fontawesome.html

4091 lines
252 KiB
HTML

<!DOCTYPE html>
<html lang="en">
<head>
<meta content="text/html; charset=UTF-8" http-equiv="Content-Type">
<meta content="IE=edge" http-equiv="X-UA-Compatible">
<meta content="width=device-width, initial-scale=1.0" name="viewport">
<meta content="Multipurpose, super flexible, powerful, clean modern responsive bootstrap 5 admin template"
name="description">
<meta content="admin template, ki-admin admin template, dashboard template, flat admin template, responsive admin template, web app"
name="keywords">
<meta content="la-themes" name="author">
<link href="../assets/images/logo/favicon.png" rel="icon" type="image/x-icon">
<link href="../assets/images/logo/favicon.png" rel="shortcut icon" type="image/x-icon">
<title>Fontawesome | ki-admin - Premium Admin Template</title>
<!--font-awesome-css-->
<link href="../assets/vendor/fontawesome/css/all.css" rel="stylesheet">
<!-- Fonts -->
<link href="https://fonts.googleapis.com" rel="preconnect">
<link crossorigin href="https://fonts.gstatic.com" rel="preconnect">
<link href="https://fonts.googleapis.com/css2?family=Rubik:ital,wght@0,300..900;1,300..900&display=swap"
rel="stylesheet">
<!--notifications-css-->
<link href="../assets/vendor/notifications/toastify.min.css" rel="stylesheet" type="text/css">
<!-- tabler icons-->
<link href="../assets/vendor/tabler-icons/tabler-icons.css" rel="stylesheet" type="text/css">
<!--flag Icon css-->
<link href="../assets/vendor/flag-icons-master/flag-icon.css" rel="stylesheet" type="text/css">
<!-- Bootstrap css-->
<link href="../assets/vendor/bootstrap/bootstrap.min.css" rel="stylesheet" type="text/css">
<!-- simplebar css-->
<link href="../assets/vendor/simplebar/simplebar.css" rel="stylesheet" type="text/css">
<!--Notifications-css-->
<link href="../assets/vendor/notifications/toastify.min.css" rel="stylesheet" type="text/css">
<!-- App css-->
<link href="../assets/css/style.css" rel="stylesheet" type="text/css">
<!-- Responsive css-->
<link href="../assets/css/responsive.css" rel="stylesheet" type="text/css">
</head>
<body>
<div class="app-wrapper">
<div class="loader-wrapper">
<div class="loader_24"></div>
</div>
<!-- Menu Navigation starts -->
<nav>
<div class="app-logo">
<a class="logo d-inline-block" href="index.html">
<img alt="#" src="../assets/images/logo/1.png">
</a>
<span class="bg-light-primary toggle-semi-nav d-flex-center">
<i class="ti ti-chevron-right"></i>
</span>
<div class="d-flex align-items-center nav-profile p-3">
<span class="h-45 w-45 d-flex-center b-r-10 position-relative bg-danger m-auto">
<img alt="avatar" class="img-fluid b-r-10" src="../assets/images/avatar/woman.jpg">
<span class="position-absolute top-0 end-0 p-1 bg-success border border-light rounded-circle"></span>
</span>
<div class="flex-grow-1 ps-2">
<h6 class="text-primary mb-0"> Ninfa Monaldo</h6>
<p class="text-muted f-s-12 mb-0">Web Developer</p>
</div>
<div class="dropdown profile-menu-dropdown">
<a aria-expanded="false" data-bs-auto-close="true" data-bs-placement="top" data-bs-toggle="dropdown"
role="button">
<i class="ti ti-settings fs-5"></i>
</a>
<ul class="dropdown-menu">
<li class="dropdown-item">
<a class="f-w-500" href="profile.html" target="_blank">
<i class="ph-duotone ph-user-circle pe-1 f-s-20"></i> Profile Details
</a>
</li>
<li class="dropdown-item">
<a class="f-w-500" href="setting.html" target="_blank">
<i class="ph-duotone ph-gear pe-1 f-s-20"></i> Settings
</a>
</li>
<li class="dropdown-item">
<div class="d-flex align-items-center justify-content-between">
<div>
<a class="f-w-500" href="fontawesome.html#">
<i class="ph-duotone ph-detective pe-1 f-s-20"></i> Incognito
</a>
</div>
<div class="flex-shrink-0">
<div class="form-check form-switch">
<input class="form-check-input form-check-primary" id="incognitoSwitch"
type="checkbox">
</div>
</div>
</div>
</li>
<li class="dropdown-item">
<a class="mb-0 text-secondary f-w-500" href="sign_up.html" target="_blank">
<i class="ph-bold ph-plus pe-1 f-s-20"></i> Add account
</a>
</li>
<li class="app-divider-v dotted py-1"></li>
<li class="dropdown-item">
<a class="mb-0 text-danger" href="sign_in.html" target="_blank">
<i class="ph-duotone ph-sign-out pe-1 f-s-20"></i> Log Out
</a>
</li>
</ul>
</div>
</div>
</div>
<div class="app-nav" id="app-simple-bar">
<ul class="main-nav p-0 mt-2">
<li class="menu-title">
<span>Dashboard</span>
</li>
<li>
<a aria-expanded="false" data-bs-toggle="collapse" href="fontawesome.html#dashboard">
<svg stroke="currentColor" stroke-width="1.5">
<use xlink:href="../assets/svg/_sprite.svg#home"></use>
</svg>
dashboard
<span class="badge bg-danger badge-dashboard badge-notification ms-2">New</span>
</a>
<ul class="collapse" id="dashboard">
<li><a href="index.html">Ecommerce</a></li>
<li><a href="project_dashboard.html">Project</a></li>
</ul>
</li>
<li>
<a aria-expanded="false" data-bs-toggle="collapse" href="fontawesome.html#apps">
<svg stroke="currentColor" stroke-width="1.5">
<use xlink:href="../assets/svg/_sprite.svg#stack"></use>
</svg>
Apps
</a>
<ul class="collapse" id="apps">
<li><a href="calendar.html">Calender</a></li>
<li class="another-level">
<a aria-expanded="false" data-bs-toggle="collapse" href="fontawesome.html#Profile-page">
Profile
</a>
<ul class="collapse" id="Profile-page">
<li><a href="profile.html">Profile</a></li>
<li><a href="setting.html">Setting</a></li>
</ul>
</li>
<li class="another-level">
<a aria-expanded="false" data-bs-toggle="collapse" href="fontawesome.html#projects-page">
Projects Page
</a>
<ul class="collapse" id="projects-page">
<li><a href="project_app.html">projects</a></li>
<li><a href="project_details.html">projects Details</a></li>
</ul>
</li>
<li><a href="to_do.html">To-Do</a></li>
<li><a href="team.html">Team</a></li>
<li><a href="api.html">API</a></li>
<li class="another-level">
<a aria-expanded="false" data-bs-toggle="collapse" href="fontawesome.html#ticket-page">
Ticket
</a>
<ul class="collapse" id="ticket-page">
<li><a href="ticket.html">Ticket</a></li>
<li><a href="ticket_details.html">Ticket Details</a></li>
</ul>
</li>
<li class="another-level">
<a aria-expanded="false" data-bs-toggle="collapse" href="fontawesome.html#email-page">
Email Page
</a>
<ul class="collapse" id="email-page">
<li><a href="email.html"> Email</a></li>
<li><a href="read_email.html">Read Email</a></li>
</ul>
</li>
<li class="another-level">
<a aria-expanded="false" data-bs-toggle="collapse" href="fontawesome.html#e-shop">
E-shop
</a>
<ul class="collapse" id="e-shop">
<li><a href="cart.html">Cart</a></li>
<li><a href="product.html">Product</a></li>
<li><a href="add_product.html">Add Product</a></li>
<li><a href="product_details.html">Product-Details</a></li>
<li><a href="product_list.html">Product list</a></li>
<li><a href="orders.html">Orders</a></li>
<li><a href="orders_details.html">Orders Details</a></li>
<li><a href="orders_list.html">Orders List</a></li>
<li><a href="checkout.html">Check out</a></li>
<li><a href="wishlist.html">Wishlist</a></li>
</ul>
</li>
<li><a href="invoice.html">Invoice</a></li>
<li><a href="chat.html">Chat</a></li>
<li><a href="file_manager.html">File manager</a></li>
<li><a href="bookmark.html">Bookmark</a></li>
<li><a href="kanban_board.html">Kanban board</a></li>
<li><a href="timeline.html">Timeline</a></li>
<li><a href="faq.html">FAQS</a></li>
<li><a href="pricing.html">Pricing</a></li>
<li><a href="gallery.html">Gallery</a></li>
<li class="another-level">
<a aria-expanded="false" data-bs-toggle="collapse" href="fontawesome.html#blog-page">
Blog Page
</a>
<ul class="collapse" id="blog-page">
<li><a href="blog.html">Blog</a></li>
<li><a href="blog_read_more.html">Blog Details</a></li>
<li><a href="add_blog.html">Add Blog</a></li>
</ul>
</li>
</ul>
</li>
<li class="no-sub">
<a href="widget.html">
<svg stroke="currentColor" stroke-width="1.5">
<use xlink:href="../assets/svg/_sprite.svg#squares"></use>
</svg>
Widgets
</a>
</li>
<li class="menu-title"><span>Component</span></li>
<li>
<a aria-expanded="false" data-bs-toggle="collapse" href="fontawesome.html#ui-kits">
<svg stroke="currentColor" stroke-width="1.5">
<use xlink:href="../assets/svg/_sprite.svg#briefcase"></use>
</svg>
UI kits
</a>
<ul class="collapse" id="ui-kits">
<li><a href="cheatsheet.html">Cheatsheet</a></li>
<li><a href="alert.html">Alert</a></li>
<li><a href="badges.html">Badges</a></li>
<li><a href="buttons.html">Buttons</a></li>
<li><a href="cards.html">Cards</a></li>
<li><a href="dropdown.html">Dropdown</a></li>
<li><a href="grid.html">Grid</a></li>
<li><a href="avatar.html">Avatar</a></li>
<li><a href="tabs.html">Tabs</a></li>
<li><a href="accordions.html">Accordions</a></li>
<li><a href="progress.html">Progress</a></li>
<li><a href="notifications.html">Notifications</a></li>
<li><a href="list.html">Lists</a></li>
<li><a href="helper_classes.html">Helper Classes</a></li>
<li><a href="background.html">Background</a></li>
<li><a href="divider.html">Divider</a></li>
<li><a href="ribbons.html">Ribbons</a></li>
<li><a href="editor.html">Editor </a></li>
<li><a href="collapse.html">Collapse</a></li>
<li><a href="footer-page.html">Footer</a></li>
<li><a href="shadow.html">Shadow</a></li>
<li><a href="wrapper.html">Wrapper</a></li>
<li><a href="bullet.html">Bullet</a></li>
<li><a href="placeholder.html">Placeholder</a></li>
<li><a href="alignment.html">Alignment Thing</a></li>
</ul>
</li>
<li>
<a aria-expanded="false" data-bs-toggle="collapse" href="fontawesome.html#advance-ui">
<svg stroke="currentColor" stroke-width="1.5">
<use xlink:href="../assets/svg/_sprite.svg#briefcase-advance"></use>
</svg>
Advance UI
<span class=" badge rounded-pill bg-warning badge-notification ms-2">
12+
<span class="visually-hidden">unread messages</span>
</span>
</a>
<ul class="collapse" id="advance-ui">
<li><a href="modals.html">Modals</a></li>
<li><a href="offcanvas.html">Offcanvas Toggle</a></li>
<li><a href="sweetalert.html">Sweat Alert</a></li>
<li><a href="scrollbar.html">Scrollbar</a></li>
<li><a href="spinners.html">Spinners</a></li>
<li><a href="animation.html">Animation</a></li>
<li><a href="video_embed.html">Video Embed</a></li>
<li><a href="tour.html">Tour</a></li>
<li><a href="slick.html">Slider</a></li>
<li><a href="bootstrap_slider.html">Bootstrap Slider</a></li>
<li><a href="scrollpy.html">Scrollpy</a></li>
<li><a href="tooltips_popovers.html">Tooltip & Popovers</a></li>
<li><a href="ratings.html">Rating</a></li>
<li><a href="prismjs.html">Prismjs</a></li>
<li><a href="count_down.html">Count Down</a></li>
<li><a href="count_up.html"> Count up </a></li>
<li><a href="draggable.html">Draggable</a></li>
<li><a href="tree-view.html">Tree View</a></li>
<li><a href="block_ui.html">Block Ui </a></li>
</ul>
</li>
<li>
<a aria-expanded="false" data-bs-toggle="collapse" href="fontawesome.html#icons">
<svg stroke="currentColor" stroke-width="1.5">
<use xlink:href="../assets/svg/_sprite.svg#gift"></use>
</svg>
Icons
</a>
<ul class="collapse" id="icons">
<li><a href="fontawesome.html">Fontawesome</a></li>
<li><a href="flag_icons.html">Flag</a></li>
<li><a href="tabler-icons.html">Tabler</a></li>
<li><a href="weather_icon.html">Weather</a></li>
<li><a href="animated_icon.html">Animated</a></li>
<li><a href="iconoir_icon.html">Iconoir</a></li>
<li><a href="phosphor.html">Phosphor</a></li>
</ul>
</li>
<li class="no-sub">
<a href="misc.html">
<svg stroke="currentColor" stroke-width="1.5">
<use xlink:href="../assets/svg/_sprite.svg#rectangle"></use>
</svg>
Misc
</a>
</li>
<li class="menu-title"><span>Map & Charts </span></li>
<li>
<a aria-expanded="false" data-bs-toggle="collapse" href="fontawesome.html#maps">
<svg stroke="currentColor" stroke-width="1.5">
<use xlink:href="../assets/svg/_sprite.svg#location"></use>
</svg>
Map
</a>
<ul class="collapse" id="maps">
<li><a href="google-map.html">Google Maps</a></li>
<li><a href="leaflet-map.html">Leaflet map</a></li>
</ul>
</li>
<li>
<a aria-expanded="false" data-bs-toggle="collapse" href="fontawesome.html#chart">
<svg stroke="currentColor" stroke-width="1.5">
<use xlink:href="../assets/svg/_sprite.svg#chart"></use>
</svg>
Chart
</a>
<ul class="collapse" id="chart">
<li><a href="chart_js.html">Chart js</a></li>
<li class="another-level">
<a aria-expanded="false" data-bs-toggle="collapse" href="fontawesome.html#apexcharts-page">
Apexcharts
</a>
<ul class="collapse" id="apexcharts-page">
<li><a href="line.html">Line</a></li>
<li><a href="area_charts.html">Area</a></li>
<li><a href="column.html">Column</a></li>
<li><a href="bar.html">Bar</a></li>
<li><a href="mixed.html">Mixed</a></li>
<li><a href="timeline_range_charts.html">Timeline & Range-Bars</a></li>
<li><a href="candlestick_charts.html">Candlestick</a></li>
<li><a href="boxplot.html">Boxplot</a></li>
<li><a href="bubble.html">Bubble</a></li>
<li><a href="scatter.html">Scatter</a></li>
<li><a href="heatmap.html">Heatmap</a></li>
<li><a href="treemap.html">Treemap</a></li>
<li><a href="pie_charts.html">Pie</a></li>
<li><a href="radial_bar.html">Radial bar</a></li>
<li><a href="radar_chart.html">Radar</a></li>
</ul>
</li>
</ul>
</li>
<li class="menu-title"><span>Table & forms </span></li>
<li>
<a aria-expanded="false" data-bs-toggle="collapse" href="fontawesome.html#table">
<svg stroke="currentColor" stroke-width="1.5">
<use xlink:href="../assets/svg/_sprite.svg#table"></use>
</svg>
Table
</a>
<ul class="collapse" id="table">
<li><a href="basic_table.html">BasicTable</a></li>
<li><a href="data_table.html">Data Table</a></li>
<li><a href="list_table.html">List Js</a></li>
<li><a href="advance_table.html">Advance Table</a></li>
</ul>
</li>
<li>
<a aria-expanded="false" data-bs-toggle="collapse" href="fontawesome.html#forms">
<svg stroke="currentColor" stroke-width="1.5">
<use xlink:href="../assets/svg/_sprite.svg#wallet"></use>
</svg>
Forms elements
</a>
<ul class="collapse" id="forms">
<li><a href="form_validation.html">Form Validation</a></li>
<li><a href="base_inputs.html">Base Input</a></li>
<li><a href="checkbox_radio.html">Checkbox & Radio</a></li>
<li><a href="input_groups.html">Input Groups</a></li>
<li><a href="input_masks.html">Input Masks</a></li>
<li><a href="floating_labels.html">Floating Labels</a></li>
<li><a href="date_picker.html">Datetimepicker</a></li>
<li><a href="touch_spin.html">Touch spin</a></li>
<li><a href="select.html">Select2</a></li>
<li><a href="switch.html">Switch</a></li>
<li><a href="range_slider.html">Range Slider</a></li>
<li><a href="typeahead.html">Typeahead</a></li>
<li><a href="textarea.html">Textarea</a></li>
<li><a href="clipboard.html">Clipboard</a></li>
<li><a href="file_upload.html">File Upload</a></li>
<li><a href="dual_list_boxes.html">Dual List Boxes</a></li>
<li><a href="default_forms.html">Default Forms</a></li>
</ul>
</li>
<li>
<a aria-expanded="false" data-bs-toggle="collapse" href="fontawesome.html#ready_to_use">
<svg stroke="currentColor" stroke-width="1.5">
<use xlink:href="../assets/svg/_sprite.svg#newspaper"></use>
</svg>
Ready to use
<span class="badge text-bg-success badge-notification ms-2">2</span>
</a>
<ul class="collapse" id="ready_to_use">
<li><a href="form_wizards.html">Form wizards</a></li>
<li><a href="form_wizard_1.html">Form wizards 1</a></li>
<li><a href="form_wizard_2.html">Form wizards 2</a></li>
<li><a href="ready_to_use_form.html">Ready To Use Form</a></li>
<li><a href="ready_to_use_table.html">Ready To Use Tables</a></li>
</ul>
</li>
<li class="menu-title"><span>Pages</span></li>
<li>
<a aria-expanded="false" data-bs-toggle="collapse" href="fontawesome.html#auth_pages">
<svg stroke="currentColor" stroke-width="1.5">
<use xlink:href="../assets/svg/_sprite.svg#window"></use>
</svg>
Auth Pages
</a>
<ul class="collapse" id="auth_pages">
<li><a href="sign_in.html">Sign In</a></li>
<li><a href="sign_in_1.html">Sign In with Bg-image</a></li>
<li><a href="sign_up.html">Sign Up</a></li>
<li><a href="sign_up_1.html">Sign Up with Bg-image</a></li>
<li><a href="password_reset.html">Password Reset</a></li>
<li><a href="password_reset_1.html">Password Reset with Bg-image</a></li>
<li><a href="password_create.html">Password Create</a></li>
<li><a href="password_create_1.html">Password Create with Bg-image</a></li>
<li><a href="lock_screen.html">Lock Screen</a></li>
<li><a href="lock_screen_1.html">Lock Screen with Bg-image</a></li>
<li><a href="two_step_verification.html">Two-Step Verification</a></li>
<li><a href="two_step_verification_1.html">Two-Step Verification with Bg-image</a></li>
</ul>
</li>
<li>
<a aria-expanded="false" data-bs-toggle="collapse" href="fontawesome.html#error_pages">
<svg stroke="currentColor" stroke-width="1.5">
<use xlink:href="../assets/svg/_sprite.svg#exclamation-circle"></use>
</svg>
Error Pages
</a>
<ul class="collapse" id="error_pages">
<li><a href="error_400.html">Bad Request </a></li>
<li><a href="error_403.html">Forbidden </a></li>
<li><a href="error_404.html">Not Found</a></li>
<li><a href="error_500.html">Internal Server</a></li>
<li><a href="error_503.html">Service Unavailable</a></li>
</ul>
</li>
<li>
<a aria-expanded="false" data-bs-toggle="collapse" href="fontawesome.html#other_pages">
<svg stroke="currentColor" stroke-width="1.5">
<use xlink:href="../assets/svg/_sprite.svg#document"></use>
</svg>
Other Pages
</a>
<ul class="collapse" id="other_pages">
<li><a href="blank.html">Blank</a></li>
<li><a href="maintenance.html">Maintenance</a></li>
<li><a href="landing.html">Landing Page</a></li>
<li><a href="coming_soon.html">Coming Soon</a></li>
<li><a href="sitemap.html">Sitemap</a></li>
<li><a href="privacy_policy.html">Privacy Policy</a></li>
<li><a href="terms_condition.html">Terms &amp; Condition</a></li>
</ul>
</li>
<li class="menu-title"><span>Others</span></li>
<li>
<a aria-expanded="false" data-bs-toggle="collapse" href="fontawesome.html#level">
<svg stroke="currentColor" stroke-width="1.5">
<use xlink:href="../assets/svg/_sprite.svg#arrow-down"></use>
</svg>
2 level
</a>
<ul class="collapse" id="level">
<li><a href="fontawesome.html#">Blank</a></li>
<li class="another-level">
<a aria-expanded="false" data-bs-toggle="collapse" href="fontawesome.html#level2">
Another level
</a>
<ul class="collapse" id="level2">
<li><a href="blank.html">Blank</a></li>
</ul>
</li>
</ul>
</li>
<li class="no-sub">
<a href="https://phpstack-1384472-5121645.cloudwaysapps.com/document/html/ki-admin/index.html">
<svg stroke="currentColor" stroke-width="1.5">
<use xlink:href="../assets/svg/_sprite.svg#document-text"></use>
</svg>
Document
</a>
</li>
<li class="no-sub">
<a href="mailto:teqlathemes@gmail.com">
<svg stroke="currentColor" stroke-width="1.5">
<use xlink:href="../assets/svg/_sprite.svg#chat-bubble"></use>
</svg>
Support
</a>
</li>
</ul>
</div>
<div class="menu-navs">
<span class="menu-previous"><i class="ti ti-chevron-left"></i></span>
<span class="menu-next"><i class="ti ti-chevron-right"></i></span>
</div>
</nav>
<!-- Menu Navigation ends -->
<div class="app-content">
<div class="">
<!-- Header Section starts -->
<header class="header-main">
<div class="container-fluid">
<div class="row">
<div class="col-8 col-sm-6 d-flex align-items-center header-left p-0">
<span class="header-toggle ">
<i class="ph ph-squares-four"></i>
</span>
<div class="header-searchbar w-100">
<form action="fontawesome.html#" class="mx-sm-3 app-form app-icon-form ">
<div class="position-relative">
<input aria-label="Search" class="form-control" placeholder="Search..."
type="search">
<i class="ti ti-search text-dark"></i>
</div>
</form>
</div>
</div>
<div class="col-4 col-sm-6 d-flex align-items-center justify-content-end header-right p-0">
<ul class="d-flex align-items-center">
<li class="header-language">
<div class="flex-shrink-0 dropdown" id="lang_selector">
<a aria-expanded="false" class="d-block head-icon ps-0"
data-bs-toggle="dropdown"
href="fontawesome.html#">
<div class="lang-flag lang-en ">
<span class="flag rounded-circle overflow-hidden">
<i class=""></i>
</span>
</div>
</a>
<ul class="dropdown-menu language-dropdown header-card border-0">
<li class="lang lang-en selected dropdown-item p-2" data-bs-placement="top"
data-bs-toggle="tooltip" title="US">
<span class="d-flex align-items-center">
<i class="flag-icon flag-icon-usa flag-icon-squared rounded-circle f-s-20"></i>
<span class="ps-2">US</span>
</span>
</li>
<li class="lang lang-pt dropdown-item p-2" title="FR">
<span class="d-flex align-items-center">
<i class="flag-icon flag-icon-fra flag-icon-squared rounded-circle f-s-20"></i>
<span class="ps-2">France</span>
</span>
</li>
<li class="lang lang-es dropdown-item p-2" title="UK">
<span class="d-flex align-items-center">
<i class="flag-icon flag-icon-gbr flag-icon-squared rounded-circle f-s-20"></i>
<span class="ps-2">UK</span>
</span>
</li>
<li class="lang lang-es dropdown-item p-2" title="IT">
<span class="d-flex align-items-center">
<i class="flag-icon flag-icon-ita flag-icon-squared rounded-circle f-s-20"></i>
<span class="ps-2">Italy</span>
</span>
</li>
</ul>
</div>
</li>
<li class="header-apps">
<a aria-controls="appscanvasRights"
class="d-block head-icon bg-light-dark rounded-circle f-s-22 p-2"
data-bs-target="#appscanvasRights" data-bs-toggle="offcanvas"
href="fontawesome.html#" role="button">
<i class="ph ph-bounding-box"></i>
</a>
<div aria-labelledby="appscanvasRightsLabel"
class="offcanvas offcanvas-end header-apps-canvas"
id="appscanvasRights"
tabindex="-1">
<div class="offcanvas-header">
<h5 class="offcanvas-title" id="appscanvasRightsLabel">Shortcut</h5>
<div class="app-dropdown flex-shrink-0">
<a aria-expanded="false" class=" p-1" data-bs-auto-close="outside"
data-bs-toggle="dropdown"
href="fontawesome.html#"
role="button">
<i class="ph-bold ph-faders-horizontal f-s-20"></i>
</a>
<ul class="dropdown-menu mb-3">
<li class="dropdown-item">
<a href="setting.html" target="_blank">
Privacy Settings
</a>
</li>
<li class="dropdown-item">
<a href="setting.html" target="_blank">
Account Settings
</a>
</li>
<li class="dropdown-item">
<a href="setting.html" target="_blank">
Accessibility
</a>
</li>
<li class="dropdown-divider"></li>
<li class="dropdown-item border-0">
<a aria-expanded="false" data-bs-toggle="dropdown" href="fontawesome.html#"
role="button">
More Settings
</a>
<ul class="dropdown-menu sub-menu">
<li class="dropdown-item">
<a href="setting.html" target="_blank">
Backup and Restore
</a>
</li>
<li class="dropdown-item">
<a href="setting.html" target="_blank">
<span>Data Usage</span>
</a>
</li>
<li class="dropdown-item">
<a href="setting.html" target="_blank">
<span>Theme</span>
</a>
</li>
<li class="dropdown-item d-flex align-items-center justify-content-between">
<a href="fontawesome.html#">
<p class="mb-0">Notification</p>
</a>
<div class="flex-shrink-0">
<div class="form-check form-switch">
<input class="form-check-input form-check-primary"
id="notificationSwitch"
type="checkbox">
</div>
</div>
</li>
</ul>
</li>
</ul>
</div>
</div>
<div class="offcanvas-body app-scroll">
<div class="row row-cols-3 g-2">
<div class="d-flex-center text-center">
<a class="text-light-primary w-100 rounded-3 py-3 px-2 "
href="product.html"
target="_blank">
<span>
<i class="ph-light ph-shopping-bag-open f-s-30"></i>
</span>
<p class="mb-0 f-w-500 text-dark">E-shop</p>
</a>
</div>
<div class="d-flex-center text-center">
<a class="text-light-danger w-100 rounded-3 py-3 px-2 "
href="email.html"
target="_blank">
<span>
<i class="ph-light ph-envelope f-s-30"></i>
</span>
<p class="mb-0 f-w-500 text-dark">Email</p>
</a>
</div>
<div class="d-flex-center text-center">
<a class="text-light-success w-100 rounded-3 py-3 px-2 "
href="chat.html"
target="_blank">
<span>
<i class="ph-light ph-chat-circle-text f-s-30"></i>
</span>
<p class="mb-0 f-w-500 text-dark">Chat</p>
</a>
</div>
<div class="d-flex-center text-center">
<a class="text-light-warning w-100 rounded-3 py-3 px-2 "
href="project_app.html"
target="_blank">
<span>
<i class="ph-light ph-projector-screen-chart f-s-30"></i>
</span>
<p class="mb-0 f-w-500 text-dark">Project</p>
</a>
</div>
<div class="d-flex-center text-center">
<a class="text-light-info w-100 rounded-3 py-3 px-2 "
href="invoice.html"
target="_blank">
<span>
<i class="ph-light ph-scroll f-s-30"></i>
</span>
<p class="mb-0 f-w-500 text-dark">Invoice</p>
</a>
</div>
<div class="d-flex-center text-center">
<a class="text-light-dark w-100 rounded-3 py-3 px-2 "
href="blog.html"
target="_blank">
<span>
<i class="ph-light ph-notebook f-s-30"></i>
</span>
<p class="mb-0 f-w-500 text-dark">Blog</p>
</a>
</div>
<div class="d-flex-center text-center">
<a class="text-light-danger w-100 rounded-3 py-3 px-2 "
href="calendar.html"
target="_blank">
<span>
<i class="ph-light ph-calendar f-s-30"></i>
</span>
<p class="mb-0 f-w-500 text-dark">Calender</p>
</a>
</div>
<div class="d-flex-center text-center">
<a class="text-light-warning w-100 rounded-3 py-3 px-2 "
href="file_manager.html"
target="_blank">
<span>
<i class="ph-light ph-folder-open f-s-30"></i>
</span>
<p class="mb-0 f-w-500 text-dark txt-ellipsis-1">File
Manager</p>
</a>
</div>
<div class="d-flex-center text-center">
<a class="text-light-primary w-100 rounded-3 py-3 px-2 "
href="gallery.html"
target="_blank">
<span>
<i class="ph-light ph-google-photos-logo f-s-30"></i>
</span>
<p class="mb-0 f-w-500 text-dark">Gallery</p>
</a>
</div>
<div class="d-flex-center text-center">
<a class="text-light-success w-100 rounded-3 py-3 px-2 "
href="profile.html"
target="_blank">
<span>
<i class="ph-light ph-users-three f-s-30"></i>
</span>
<p class="mb-0 f-w-500 text-dark">Profile</p>
</a>
</div>
<div class="d-flex-center text-center">
<a class="text-light-secondary w-100 rounded-3 py-3 px-2 "
href="kanban_board.html"
target="_blank">
<span>
<i class="ph-light ph-selection-foreground f-s-30"></i>
</span>
<p class="mb-0 f-w-500 text-dark">Task Board</p>
</a>
</div>
<div class="d-flex-center text-center">
<a class="d-flex-center text-light-secondary w-100 h-100 rounded-3 p-2 dashed-1-secondary"
href="kanban_board.html"
target="_blank">
<span>
<i class="ph-light ph-plus f-s-30"></i>
</span>
</a>
</div>
</div>
</div>
</div>
</li>
<li class="header-cart">
<a aria-controls="cartcanvasRight"
class="d-block head-icon position-relative bg-light-dark rounded-circle f-s-22 p-2"
data-bs-target="#cartcanvasRight"
data-bs-toggle="offcanvas"
href="fontawesome.html#" role="button">
<i class="ph ph-shopping-cart-simple"></i>
<span
class="position-absolute translate-middle badge rounded-pill bg-danger badge-notification">4</span>
</a>
<div aria-labelledby="cartcanvasRightLabel"
class="offcanvas offcanvas-end header-cart-canvas"
id="cartcanvasRight"
tabindex="-1">
<div class="offcanvas-header">
<h5 class="offcanvas-title" id="cartcanvasRightLabel">Cart</h5>
<button aria-label="Close" class="btn-close" data-bs-dismiss="offcanvas"
type="button"></button>
</div>
<div class="offcanvas-body app-scroll p-0">
<div class="head-container">
<div class="head-box">
<span class="b-1-light bg-light-primary h-45 w-45 d-flex-center b-r-6">
<img alt="cart" class="img-fluid p-1"
src="../assets/images/header/cart/01.png">
</span>
<div class="flex-grow-1 ms-2">
<a class="mb-0 f-w-600 f-s-16" href="product_details.html"
target="_blank"> Backpacks (3<i
class="ti ti-star-filled text-warning f-s-12"></i>)
</a>
<div>
<span class="text-dark"><span
class="text-secondary f-w-400">size</span> : M</span>
<span class="text-dark ms-2"><span
class="text-secondary f-w-400">color</span> :Pink</span>
</div>
</div>
<div class="text-end">
<i class="ph ph-trash f-s-18 text-danger close-btn"></i>
<p class="text-muted f-w-500 mb-0">$600.50 x 1</p>
</div>
</div>
<div class="head-box">
<span class="b-1-light bg-light-primary h-45 w-45 d-flex-center b-r-6">
<img alt="cart" class="img-fluid p-1"
src="../assets/images/header/cart/05.png">
</span>
<div class="flex-grow-1 ms-2">
<a class="mb-0 f-w-600 f-s-16" href="product_details.html"
target="_blank"> Women's Watch (4<i
class="ti ti-star-filled text-warning f-s-12"></i>)</a>
<div>
<span class="text-dark"><span
class="text-secondary f-w-400">size</span> : S</span>
<span class="text-dark ms-2"><span
class="text-secondary f-w-400">color</span> :Rose Gold</span>
</div>
</div>
<div class="text-end">
<i class="ph ph-trash f-s-18 text-danger close-btn"></i>
<p class="text-muted f-w-500 mb-0">$519.10 x 2</p>
</div>
</div>
<div class="head-box">
<span class="b-1-light bg-light-primary h-45 w-45 d-flex-center b-r-6">
<img alt="cart" class="img-fluid p-1"
src="../assets/images/header/cart/04.png">
</span>
<div class="flex-grow-1 ms-2">
<a class="mb-0 f-w-600 f-s-16" href="product_details.html"
target="_blank">Sandals (5 <i
class="ti ti-star-filled text-warning f-s-12"></i>)</a>
<div>
<span class="text-dark"><span
class="text-secondary f-w-400">size</span> : 8</span>
<span class="text-dark ms-2"><span
class="text-secondary f-w-400">color</span> :White</span>
</div>
</div>
<div class="text-end">
<i class="ph ph-trash f-s-18 text-danger close-btn"></i>
<p class="text-muted f-w-500 mb-0">$390 x 2</p>
</div>
</div>
<div class="head-box ">
<span class="b-1-light bg-light-primary h-45 w-45 d-flex-center b-r-6">
<img alt="cart" class="img-fluid p-1"
src="../assets/images/header/cart/03.png">
</span>
<div class="flex-grow-1 ms-2">
<a class="mb-0 f-w-600 f-s-16" href="product_details.html"
target="_blank"> Jackets (3<i
class="ti ti-star-filled text-warning f-s-12"></i>)</a>
<div>
<span class="text-dark"><span
class="text-secondary f-w-400">size</span> : XL</span>
<span class="text-dark ms-2"><span
class="text-secondary f-w-400">color</span> :Blue</span>
</div>
</div>
<div class="text-end">
<i class="ph ph-trash f-s-18 text-danger close-btn"></i>
<p class="text-muted f-w-500 mb-0">$300.00 x 2</p>
</div>
</div>
<div class="head-box ">
<span class="b-1-light bg-light-primary h-45 w-45 d-flex-center b-r-6">
<img alt="cart" class="img-fluid p-1"
src="../assets/images/header/cart/02.png">
</span>
<div class="flex-grow-1 ms-2">
<a class="mb-0 f-w-600 f-s-16" href="product_details.html"
target="_blank"> Shoes (3<i
class="ti ti-star-filled text-warning f-s-12"></i>)</a>
<div>
<span class="text-dark"><span
class="text-secondary f-w-400">size</span> : 9</span>
<span class="text-dark ms-2"><span
class="text-secondary f-w-400">color</span> :White</span>
</div>
</div>
<div class="text-end">
<i class="ph ph-trash f-s-18 text-danger close-btn"></i>
<p class="text-muted f-w-500 mb-0">$450.00 x 1</p>
</div>
</div>
<div class="hidden-massage py-4 px-3">
<div>
<i class="ph-duotone ph-shopping-bag-open f-s-50 text-primary"></i>
<h6 class="mb-0">Your Cart is Empty</h6>
<p class="text-secondary mb-0">Add some items :)</p>
<a class="btn btn-light-primary btn-xs mt-2"
href="product_details.html">Shop
Now</a>
</div>
</div>
</div>
</div>
<div class="offcanvas-footer">
<div class="head-box-footer p-3">
<div class="mb-4">
<h6 class="text-muted f-w-600">Total <span
class="float-end text-primary">$3,468.00</span></h6>
</div>
<div class="header-cart-btn">
<a class="btn btn-primary" href="cart.html" role="button"
target="_blank">
<i class="ti ti-eye"></i> View Cart</a>
<a class="btn btn-success" href="checkout.html" role="button"
target="_blank">
Checkout <i class="ti ti-shopping-cart"></i></a>
</div>
</div>
</div>
</div>
</li>
<li class="header-dark">
<div class="sun-logo head-icon bg-light-dark rounded-circle f-s-22 p-2">
<i class="ph ph-moon-stars"></i>
</div>
<div class="moon-logo head-icon bg-light-dark rounded-circle f-s-22 p-2">
<i class="ph ph-sun-dim"></i>
</div>
</li>
<li class="header-notification">
<a aria-controls="notificationcanvasRight"
class="d-block head-icon position-relative bg-light-dark rounded-circle f-s-22 p-2"
data-bs-target="#notificationcanvasRight"
data-bs-toggle="offcanvas"
href="fontawesome.html#"
role="button">
<i class="ph ph-bell"></i>
<span
class="position-absolute translate-middle p-1 bg-primary border border-light rounded-circle animate__animated animate__fadeIn animate__infinite animate__slower"></span>
</a>
<div aria-labelledby="notificationcanvasRightLabel"
class="offcanvas offcanvas-end header-notification-canvas"
id="notificationcanvasRight" tabindex="-1">
<div class="offcanvas-header">
<h5 class="offcanvas-title" id="notificationcanvasRightLabel">
Notification</h5>
<button aria-label="Close" class="btn-close" data-bs-dismiss="offcanvas"
type="button"></button>
</div>
<div class="offcanvas-body app-scroll p-0">
<div class="head-container">
<div class="notification-message head-box">
<div class="message-content-box flex-grow-1 pe-2">
<a class="f-s-15 text-dark mb-0"
href="read_email.html"><span
class="f-w-500 text-dark">Gene Hart</span> wants to
edit <span
class="f-w-500 text-dark">Report.doc</span></a>
<div>
<a class="d-inline-block f-w-500 text-success me-1"
href="fontawesome.html#">Approve</a>
<a class="d-inline-block f-w-500 text-danger"
href="fontawesome.html#">Deny</a>
</div>
</div>
<div class="text-end">
<i class="ph ph-trash f-s-18 text-danger close-btn"></i>
<div>
<span class="badge text-light-primary"> sep 23 </span>
</div>
</div>
</div>
<div class="notification-message head-box">
<div class="message-content-box flex-grow-1 pe-2">
<a class="f-s-15 text-dark mb-0" href="read_email.html">Hey
<span
class="f-w-500 text-dark">Emery McKenzie</span>,
get ready: Your order from <span
class="f-w-500 text-dark">@Shopper.com</span></a>
</div>
<div class="text-end">
<i class="ph ph-trash f-s-18 text-danger close-btn"></i>
<div>
<span class="badge text-light-primary"> sep 23 </span>
</div>
</div>
</div>
<div class="notification-message head-box">
<div class="message-content-box flex-grow-1 pe-2">
<a class="f-s-15 text-dark mb-0"
href="read_email.html"><span
class="f-w-500 text-dark">Simon Young</span> shared
a file called <span
class="f-w-500 text-dark">Dropdown.pdf</span></a>
</div>
<div class="text-end">
<i class="ph ph-trash f-s-18 text-danger close-btn"></i>
<div>
<span class="badge text-light-primary"> 30 min</span>
</div>
</div>
</div>
<div class="notification-message head-box">
<div class="message-content-box flex-grow-1 pe-2">
<a class="f-s-15 text-dark mb-0"
href="read_email.html"><span
class="f-w-500 text-dark">Becky G. Hayes</span> has
added a comment to <span
class="f-w-500 text-dark">Final_Report.pdf</span></a>
</div>
<div class="text-end">
<i class="ph ph-trash f-s-18 text-danger close-btn"></i>
<div>
<span class="badge text-light-primary"> 45 min</span>
</div>
</div>
</div>
<div class="notification-message head-box">
<div class="message-content-box flex-grow-1 pe-2">
<a class="f-s-15 text-dark mb-0 "
href="read_email.html"><span
class="f-w-600 text-dark">@Romaine</span>
invited you to a meeting
</a>
<div>
<a class="d-inline-block f-w-500 text-success me-1"
href="fontawesome.html#">Join</a>
<a class="d-inline-block f-w-500 text-danger" href="fontawesome.html#">Decline</a>
</div>
</div>
<div class="text-end">
<i class="ph ph-trash f-s-18 text-danger close-btn"></i>
<div>
<span class="badge text-light-primary"> 1 hour ago </span>
</div>
</div>
</div>
<div class="hidden-massage py-4 px-3">
<div>
<i class="ph-duotone ph-bell-ringing f-s-50 text-primary"></i>
</div>
<div>
<h6 class="mb-0">Notification Not Found</h6>
<p class="text-dark">When you have any notifications added
here,will
appear here.
</p>
</div>
</div>
</div>
</div>
</div>
</li>
</ul>
</div>
</div>
</div>
</header>
<!-- Header Section ends -->
<!-- Body main section starts -->
<main>
<div class="container-fluid">
<!-- Breadcrumb start -->
<div class="row m-1">
<div class="col-12 ">
<h4 class="main-title">Fontawesome</h4>
<ul class="app-line-breadcrumbs mb-3">
<li class="">
<a class="f-s-14 f-w-500" href="fontawesome.html#">
<span>
<i class="ph-duotone ph-shapes f-s-16"></i> Icons
</span>
</a>
</li>
<li class="active">
<a class="f-s-14 f-w-500" href="fontawesome.html#">Fontawesome</a>
</li>
</ul>
</div>
</div>
<!-- Breadcrumb end -->
<div class="row">
<div class="col-12">
<div class="card">
<div class="card-header">
<div class="row">
<div class="col-md-4">
<div class="search-bar app-form app-icon-form position-relative">
<input class="form-control" name="search" placeholder="type to search"
type="search">
<i class="ti ti-search text-secondary"></i>
</div>
</div>
<div class="col-md-8 text-end pt-2">
</div>
</div>
</div>
<div class="card-body d-flex justify-content-between align-items-center">
<ul class="icon-list space-top-icon">
<li class="icon-box" onclick="text_font(this)">
<i class="fa-solid fa-adjust fa-fw"></i>
<strong class="mb-3">Adjust</strong>
</li>
<li class="icon-box" onclick="text_font(this)">
<i class="fa-solid fa-brands fa-adn fa-fw"></i>
<strong class="mb-3">Adn</strong>
</li>
<li class="icon-box" onclick="text_font(this)">
<i class="fa-solid fa-align-center fa-fw"></i>
<strong class="mb-3">Align center</strong>
</li>
<li class="icon-box" onclick="text_font(this)">
<i class="fa-solid fa-align-justify fa-fw"></i>
<strong class="mb-3">Align justify</strong>
</li>
<li class="icon-box" onclick="text_font(this)">
<i class="fa-solid fa-align-left fa-fw"></i>
<strong class="mb-3">Align left</strong>
</li>
<li class="icon-box" onclick="text_font(this)">
<i class="fa-solid fa-align-right fa-fw"></i>
<strong class="mb-3">Align right</strong>
</li>
<li class="icon-box" onclick="text_font(this)">
<i class="fa-solid fa-brands fa-amazon fa-fw"></i>
<strong class="mb-3">Amazon</strong>
</li>
<li class="icon-box" onclick="text_font(this)">
<i class="fa-solid fa-ambulance fa-fw"></i>
<strong class="mb-3">Ambulance</strong>
</li>
<li class="icon-box" onclick="text_font(this)">
<i class="fa-solid fa-anchor fa-fw"></i>
<strong class="mb-3">Anchor</strong>
</li>
<li class="icon-box" onclick="text_font(this)">
<i class="fa-solid fa-brands fa-android fa-fw"></i>
<strong class="mb-3">Android</strong>
</li>
<li class="icon-box" onclick="text_font(this)">
<i class="fa-solid fa-brands fa-angellist fa-fw"></i>
<strong class="mb-3">Angellist</strong>
</li>
<li class="icon-box" onclick="text_font(this)">
<i class="fa-solid fa-angle-double-down fa-fw"></i>
<strong class="mb-3">Angle double down</strong>
</li>
<li class="icon-box" onclick="text_font(this)">
<i class="fa-solid fa-angle-double-left fa-fw"></i>
<strong class="mb-3">Angle double left</strong>
</li>
<li class="icon-box" onclick="text_font(this)">
<i class="fa-solid fa-angle-double-right fa-fw"></i>
<strong class="mb-3">Angle double right</strong>
</li>
<li class="icon-box" onclick="text_font(this)">
<i class="fa-solid fa-angle-double-up fa-fw"></i>
<strong class="mb-3">Angle double up</strong>
</li>
<li class="icon-box" onclick="text_font(this)">
<i class="fa-solid fa-angle-down fa-fw"></i>
<strong class="mb-3">Angle down</strong>
</li>
<li class="icon-box" onclick="text_font(this)">
<i class="fa-solid fa-angle-left fa-fw"></i>
<strong class="mb-3">Angle left</strong>
</li>
<li class="icon-box" onclick="text_font(this)">
<i class="fa-solid fa-angle-right fa-fw"></i>
<strong class="mb-3">Angle right</strong>
</li>
<li class="icon-box" onclick="text_font(this)">
<i class="fa-solid fa-angle-up fa-fw"></i>
<strong class="mb-3">Angle up</strong>
</li>
<li class="icon-box" onclick="text_font(this)">
<i class="fa-solid fa-brands fa-apple fa-fw"></i>
<strong class="mb-3">Apple</strong>
</li>
<li class="icon-box" onclick="text_font(this)">
<i class="fa-solid fa-archive fa-fw"></i>
<strong class="mb-3">Archive</strong>
</li>
<li class="icon-box" onclick="text_font(this)">
<i class="fa-solid fa-area-chart fa-fw"></i>
<strong class="mb-3">Area chart</strong>
</li>
<li class="icon-box" onclick="text_font(this)">
<i class="fa-solid fa-arrow-circle-down fa-fw"></i>
<strong class="mb-3">Arrow circle down</strong>
</li>
<li class="icon-box" onclick="text_font(this)">
<i class="fa-solid fa-arrow-circle-left fa-fw"></i>
<strong class="mb-3">Arrow circle left</strong>
</li>
<li class="icon-box" onclick="text_font(this)">
<i class="fa-solid fa-circle-down fa-fw"></i>
<strong class="mb-3">Arrow circle o down</strong>
</li>
<li class="icon-box" onclick="text_font(this)">
<i class="fa-solid fa-arrow-circle-left fa-fw"></i>
<strong class="mb-3">Arrow circle o left</strong>
</li>
<li class="icon-box" onclick="text_font(this)">
<i class="fa-solid fa-arrow-circle-right fa-fw"></i>
<strong class="mb-3">Arrow circle o right</strong>
</li>
<li class="icon-box" onclick="text_font(this)">
<i class="fa-solid fa-arrow-circle-up fa-fw"></i>
<strong class="mb-3">Arrow circle o up</strong>
</li>
<li class="icon-box" onclick="text_font(this)">
<i class="fa-solid fa-arrow-circle-right fa-fw"></i>
<strong class="mb-3">Arrow circle right</strong>
</li>
<li class="icon-box" onclick="text_font(this)">
<i class="fa-solid fa-arrow-circle-up fa-fw"></i>
<strong class="mb-3">Arrow circle up</strong>
</li>
<li class="icon-box" onclick="text_font(this)">
<i class="fa-solid fa-arrow-down fa-fw"></i>
<strong class="mb-3">Arrow down</strong>
</li>
<li class="icon-box" onclick="text_font(this)">
<i class="fa-solid fa-arrow-left fa-fw"></i>
<strong class="mb-3">Arrow left</strong>
</li>
<li class="icon-box" onclick="text_font(this)">
<i class="fa-solid fa-arrow-right fa-fw"></i>
<strong class="mb-3">Arrow right</strong>
</li>
<li class="icon-box" onclick="text_font(this)">
<i class="fa-solid fa-arrow-up fa-fw"></i>
<strong class="mb-3">Arrow up</strong>
</li>
<li class="icon-box" onclick="text_font(this)">
<i class="fa-solid fa-arrows fa-fw"></i>
<strong class="mb-3">Arrows</strong>
</li>
<li class="icon-box" onclick="text_font(this)">
<i class="fa-solid fa-arrows-alt fa-fw"></i>
<strong class="mb-3">Arrows alt</strong>
</li>
<li class="icon-box" onclick="text_font(this)">
<i class="fa-solid fa-arrows-h fa-fw"></i>
<strong class="mb-3">Arrows h</strong>
</li>
<li class="icon-box" onclick="text_font(this)">
<i class="fa-solid fa-arrows-v fa-fw"></i>
<strong class="mb-3">Arrows v</strong>
</li>
<li class="icon-box" onclick="text_font(this)">
<i class="fa-solid fa-asterisk fa-fw"></i>
<strong class="mb-3">Asterisk</strong>
</li>
<li class="icon-box" onclick="text_font(this)">
<i class="fa-solid fa-at fa-fw"></i>
<strong class="mb-3">At</strong>
</li>
<li class="icon-box" onclick="text_font(this)">
<i class="fa-solid fa-backward fa-fw"></i>
<strong class="mb-3">Backward</strong>
</li>
<li class="icon-box" onclick="text_font(this)">
<i class="fa-solid fa-balance-scale fa-fw"></i>
<strong class="mb-3">Balance scale</strong>
</li>
<li class="icon-box" onclick="text_font(this)">
<i class="fa-solid fa-ban fa-fw"></i>
<strong class="mb-3">Ban</strong>
</li>
<li class="icon-box" onclick="text_font(this)">
<i class="fa-solid fa-bar-chart fa-fw"></i>
<strong class="mb-3">Bar chart</strong>
</li>
<li class="icon-box" onclick="text_font(this)">
<i class="fa-solid fa-barcode fa-fw"></i>
<strong class="mb-3">Barcode</strong>
</li>
<li class="icon-box" onclick="text_font(this)">
<i class="fa-solid fa-bars fa-fw"></i>
<strong class="mb-3">Bars</strong>
</li>
<li class="icon-box" onclick="text_font(this)">
<i class="fa-solid fa-battery-empty fa-fw"></i>
<strong class="mb-3">Battery empty</strong>
</li>
<li class="icon-box" onclick="text_font(this)">
<i class="fa-solid fa-battery-full fa-fw"></i>
<strong class="mb-3">Battery full</strong>
</li>
<li class="icon-box" onclick="text_font(this)">
<i class="fa-solid fa-battery-half fa-fw"></i>
<strong class="mb-3">Battery half</strong>
</li>
<li class="icon-box" onclick="text_font(this)">
<i class="fa-solid fa-battery-quarter fa-fw"></i>
<strong class="mb-3">Battery quarter</strong>
</li>
<li class="icon-box" onclick="text_font(this)">
<i class="fa-solid fa-battery-three-quarters fa-fw"></i>
<strong class="mb-3">Battery three quarters</strong>
</li>
<li class="icon-box" onclick="text_font(this)">
<i class="fa-solid fa-bed fa-fw"></i>
<strong class="mb-3">Bed</strong>
</li>
<li class="icon-box" onclick="text_font(this)">
<i class="fa-solid fa-beer fa-fw"></i>
<strong class="mb-3">Beer</strong>
</li>
<li class="icon-box" onclick="text_font(this)">
<i class="fa-solid fa-behance fa-fw"></i>
<strong class="mb-3">Behance</strong>
</li>
<li class="icon-box" onclick="text_font(this)">
<i class="fa-solid fa-behance-square fa-fw"></i>
<strong class="mb-3">Behance square</strong>
</li>
<li class="icon-box" onclick="text_font(this)">
<i class="fa-solid fa-bell fa-fw"></i>
<strong class="mb-3">Bell</strong>
</li>
<li class="icon-box" onclick="text_font(this)">
<i class="fa-solid fa-bell-slash fa-fw"></i>
<strong class="mb-3">Bell slash</strong>
</li>
<li class="icon-box" onclick="text_font(this)">
<i class="fa-solid fa-bicycle fa-fw"></i>
<strong class="mb-3">Bicycle</strong>
</li>
<li class="icon-box" onclick="text_font(this)">
<i class="fa-solid fa-binoculars fa-fw"></i>
<strong class="mb-3">Binoculars</strong>
</li>
<li class="icon-box" onclick="text_font(this)">
<i class="fa-solid fa-birthday-cake fa-fw"></i>
<strong class="mb-3">Birthday cake</strong>
</li>
<li class="icon-box" onclick="text_font(this)">
<i class="fa-solid fa-brands fa-bitbucket fa-fw"></i>
<strong class="mb-3">Bitbucket</strong>
</li>
<li class="icon-box" onclick="text_font(this)">
<i class="fa-solid fa-black-tie fa-fw"></i>
<strong class="mb-3">Black tie</strong>
</li>
<li class="icon-box" onclick="text_font(this)">
<i class="fa-solid fa-bold fa-fw"></i>
<strong class="mb-3">Bold</strong>
</li>
<li class="icon-box" onclick="text_font(this)">
<i class="fa-solid fa-bolt fa-fw"></i>
<strong class="mb-3">Bolt</strong>
</li>
<li class="icon-box" onclick="text_font(this)">
<i class="fa-solid fa-bomb fa-fw"></i>
<strong class="mb-3">Bomb</strong>
</li>
<li class="icon-box" onclick="text_font(this)">
<i class="fa-solid fa-book fa-fw"></i>
<strong class="mb-3">Book</strong>
</li>
<li class="icon-box" onclick="text_font(this)">
<i class="fa-solid fa-bookmark fa-fw"></i>
<strong class="mb-3">Bookmark</strong>
</li>
<li class="icon-box" onclick="text_font(this)">
<i class="fa-solid fa-bookmark fa-fw"></i>
<strong class="mb-3">Bookmark o</strong>
</li>
<li class="icon-box" onclick="text_font(this)">
<i class="fa-solid fa-briefcase fa-fw"></i>
<strong class="mb-3">Briefcase</strong>
</li>
<li class="icon-box" onclick="text_font(this)">
<i class="fa-solid fa-btc fa-fw"></i>
<strong class="mb-3">Btc</strong>
</li>
<li class="icon-box" onclick="text_font(this)">
<i class="fa-solid fa-bug fa-fw"></i>
<strong class="mb-3">Bug</strong>
</li>
<li class="icon-box" onclick="text_font(this)">
<i class="fa-solid fa-building fa-fw"></i>
<strong class="mb-3">Building</strong>
</li>
<li class="icon-box" onclick="text_font(this)">
<i class="fa-solid fa-building fa-fw"></i>
<strong class="mb-3">Building o</strong>
</li>
<li class="icon-box" onclick="text_font(this)">
<i class="fa-solid fa-bullhorn fa-fw"></i>
<strong class="mb-3">Bullhorn</strong>
</li>
<li class="icon-box" onclick="text_font(this)">
<i class="fa-solid fa-bullseye fa-fw"></i>
<strong class="mb-3">Bullseye</strong>
</li>
<li class="icon-box" onclick="text_font(this)">
<i class="fa-solid fa-bus fa-fw"></i>
<strong class="mb-3">Bus</strong>
</li>
<li class="icon-box" onclick="text_font(this)">
<i class="fa-solid fa-brands fa-buysellads fa-fw"></i>
<strong class="mb-3">Buysellads</strong>
</li>
<li class="icon-box" onclick="text_font(this)">
<i class="fa-solid fa-calculator fa-fw"></i>
<strong class="mb-3">Calculator</strong>
</li>
<li class="icon-box" onclick="text_font(this)">
<i class="fa-solid fa-calendar fa-fw"></i>
<strong class="mb-3">Calendar</strong>
</li>
<li class="icon-box" onclick="text_font(this)">
<i class="fa-solid fa-calendar-check fa-fw"></i>
<strong class="mb-3">Calendar check o</strong>
</li>
<li class="icon-box" onclick="text_font(this)">
<i class="fa-solid fa-calendar-minus fa-fw"></i>
<strong class="mb-3">Calendar minus o</strong>
</li>
<li class="icon-box" onclick="text_font(this)">
<i class="fa-solid fa-calendar fa-fw"></i>
<strong class="mb-3">Calendar o</strong>
</li>
<li class="icon-box" onclick="text_font(this)">
<i class="fa-solid fa-calendar-plus fa-fw"></i>
<strong class="mb-3">Calendar plus o</strong>
</li>
<li class="icon-box" onclick="text_font(this)">
<i class="fa-solid fa-calendar-times fa-fw"></i>
<strong class="mb-3">Calendar times o</strong>
</li>
<li class="icon-box" onclick="text_font(this)">
<i class="fa-solid fa-camera fa-fw"></i>
<strong class="mb-3">Camera</strong>
</li>
<li class="icon-box" onclick="text_font(this)">
<i class="fa-solid fa-camera-retro fa-fw"></i>
<strong class="mb-3">Camera retro</strong>
</li>
<li class="icon-box" onclick="text_font(this)">
<i class="fa-solid fa-car fa-fw"></i>
<strong class="mb-3">Car</strong>
</li>
<li class="icon-box" onclick="text_font(this)">
<i class="fa-solid fa-caret-down fa-fw"></i>
<strong class="mb-3">Caret down</strong>
</li>
<li class="icon-box" onclick="text_font(this)">
<i class="fa-solid fa-caret-left fa-fw"></i>
<strong class="mb-3">Caret left</strong>
</li>
<li class="icon-box" onclick="text_font(this)">
<i class="fa-solid fa-caret-right fa-fw"></i>
<strong class="mb-3">Caret right</strong>
</li>
<li class="icon-box" onclick="text_font(this)">
<i class="fa-solid fa-caret-square-down fa-fw"></i>
<strong class="mb-3">Caret square o down</strong>
</li>
<li class="icon-box" onclick="text_font(this)">
<i class="fa-solid fa-caret-square-left fa-fw"></i>
<strong class="mb-3">Caret square o left</strong>
</li>
<li class="icon-box" onclick="text_font(this)">
<i class="fa-solid fa-caret-square-right fa-fw"></i>
<strong class="mb-3">Caret square o right</strong>
</li>
<li class="icon-box" onclick="text_font(this)">
<i class="fa-solid fa-caret-square-up fa-fw"></i>
<strong class="mb-3">Caret square o up</strong>
</li>
<li class="icon-box" onclick="text_font(this)">
<i class="fa-solid fa-caret-up fa-fw"></i>
<strong class="mb-3">Caret up</strong>
</li>
<li class="icon-box" onclick="text_font(this)">
<i class="fa-solid fa-cart-arrow-down fa-fw"></i>
<strong class="mb-3">Cart arrow down</strong>
</li>
<li class="icon-box" onclick="text_font(this)">
<i class="fa-solid fa-cart-plus fa-fw"></i>
<strong class="mb-3">Cart plus</strong>
</li>
<li class="icon-box" onclick="text_font(this)">
<i class="fa-solid fa-brands fa-cc-amex fa-fw"></i>
<strong class="mb-3">Cc amex</strong>
</li>
<li class="icon-box" onclick="text_font(this)">
<i class="fa-solid fa-brands fa-cc-diners-club fa-fw"></i>
<strong class="mb-3">Cc diners club</strong>
</li>
<li class="icon-box" onclick="text_font(this)">
<i class="fa-solid fa-brands fa-cc-discover fa-fw"></i>
<strong class="mb-3">Cc discover</strong>
</li>
<li class="icon-box" onclick="text_font(this)">
<i class="fa-solid fa-brands fa-cc-jcb fa-fw"></i>
<strong class="mb-3">Cc jcb</strong>
</li>
<li class="icon-box" onclick="text_font(this)">
<i class="fa-solid fa-brands fa-cc-mastercard fa-fw"></i>
<strong class="mb-3">Cc mastercard</strong>
</li>
<li class="icon-box" onclick="text_font(this)">
<i class="fa-solid fa-brands fa-cc-paypal fa-fw"></i>
<strong class="mb-3">Cc paypal</strong>
</li>
<li class="icon-box" onclick="text_font(this)">
<i class="fa-solid fa-brands fa-cc-stripe fa-fw"></i>
<strong class="mb-3">Cc stripe</strong>
</li>
<li class="icon-box" onclick="text_font(this)">
<i class="fa-solid fa-brands fa-cc-visa fa-fw"></i>
<strong class="mb-3">Cc visa</strong>
</li>
<li class="icon-box" onclick="text_font(this)">
<i class="fa-solid fa-certificate fa-fw"></i>
<strong class="mb-3">Certificate</strong>
</li>
<li class="icon-box" onclick="text_font(this)">
<i class="fa-solid fa-chain-broken fa-fw"></i>
<strong class="mb-3">Chain broken</strong>
</li>
<li class="icon-box" onclick="text_font(this)">
<i class="fa-solid fa-check fa-fw"></i>
<strong class="mb-3">Check</strong>
</li>
<li class="icon-box" onclick="text_font(this)">
<i class="fa-solid fa-check-circle fa-fw"></i>
<strong class="mb-3">Check circle</strong>
</li>
<li class="icon-box" onclick="text_font(this)">
<i class="fa-solid fa-check-circle fa-fw"></i>
<strong class="mb-3">Check circle o</strong>
</li>
<li class="icon-box" onclick="text_font(this)">
<i class="fa-solid fa-check-square fa-fw"></i>
<strong class="mb-3">Check square</strong>
</li>
<li class="icon-box" onclick="text_font(this)">
<i class="fa-solid fa-check-square fa-fw"></i>
<strong class="mb-3">Check square o</strong>
</li>
<li class="icon-box" onclick="text_font(this)">
<i class="fa-solid fa-chevron-circle-down fa-fw"></i>
<strong class="mb-3">Chevron circle down</strong>
</li>
<li class="icon-box" onclick="text_font(this)">
<i class="fa-solid fa-chevron-circle-left fa-fw"></i>
<strong class="mb-3">Chevron circle left</strong>
</li>
<li class="icon-box" onclick="text_font(this)">
<i class="fa-solid fa-chevron-circle-right fa-fw"></i>
<strong class="mb-3">Chevron circle right</strong>
</li>
<li class="icon-box" onclick="text_font(this)">
<i class="fa-solid fa-chevron-circle-up fa-fw"></i>
<strong class="mb-3">Chevron circle up</strong>
</li>
<li class="icon-box" onclick="text_font(this)">
<i class="fa-solid fa-chevron-down fa-fw"></i>
<strong class="mb-3">Chevron down</strong>
</li>
<li class="icon-box" onclick="text_font(this)">
<i class="fa-solid fa-chevron-left fa-fw"></i>
<strong class="mb-3">Chevron left</strong>
</li>
<li class="icon-box" onclick="text_font(this)">
<i class="fa-solid fa-chevron-right fa-fw"></i>
<strong class="mb-3">Chevron right</strong>
</li>
<li class="icon-box" onclick="text_font(this)">
<i class="fa-solid fa-chevron-up fa-fw"></i>
<strong class="mb-3">Chevron up</strong>
</li>
<li class="icon-box" onclick="text_font(this)">
<i class="fa-solid fa-child fa-fw"></i>
<strong class="mb-3">Child</strong>
</li>
<li class="icon-box" onclick="text_font(this)">
<i class="fa-solid fa-brands fa-chrome fa-fw"></i>
<strong class="mb-3">Chrome</strong>
</li>
<li class="icon-box" onclick="text_font(this)">
<i class="fa-solid fa-circle fa-fw"></i>
<strong class="mb-3">Circle</strong>
</li>
<li class="icon-box" onclick="text_font(this)">
<i class="fa-solid fa-circle fa-fw"></i>
<strong class="mb-3">Circle o</strong>
</li>
<li class="icon-box" onclick="text_font(this)">
<i class="fa-solid fa-circle-notch fa-fw"></i>
<strong class="mb-3">Circle o notch</strong>
</li>
<li class="icon-box" onclick="text_font(this)">
<i class="fa-solid fa-circle fa-fw"></i>
<strong class="mb-3">Circle thin</strong>
</li>
<li class="icon-box" onclick="text_font(this)">
<i class="fa-solid fa-clipboard fa-fw"></i>
<strong class="mb-3">Clipboard</strong>
</li>
<li class="icon-box" onclick="text_font(this)">
<i class="fa-solid fa-clock fa-fw"></i>
<strong class="mb-3">Clock o</strong>
</li>
<li class="icon-box" onclick="text_font(this)">
<i class="fa-solid fa-clone fa-fw"></i>
<strong class="mb-3">Clone</strong>
</li>
<li class="icon-box" onclick="text_font(this)">
<i class="fa-solid fa-cloud fa-fw"></i>
<strong class="mb-3">Cloud</strong>
</li>
<li class="icon-box" onclick="text_font(this)">
<i class="fa-solid fa-cloud-download fa-fw"></i>
<strong class="mb-3">Cloud download</strong>
</li>
<li class="icon-box" onclick="text_font(this)">
<i class="fa-solid fa-cloud-upload fa-fw"></i>
<strong class="mb-3">Cloud upload</strong>
</li>
<li class="icon-box" onclick="text_font(this)">
<i class="fa-solid fa-code fa-fw"></i>
<strong class="mb-3">Code</strong>
</li>
<li class="icon-box" onclick="text_font(this)">
<i class="fa-solid fa-code-fork fa-fw"></i>
<strong class="mb-3">Code fork</strong>
</li>
<li class="icon-box" onclick="text_font(this)">
<i class="fa-solid fa-brands fa-codepen fa-fw"></i>
<strong class="mb-3">Codepen</strong>
</li>
<li class="icon-box" onclick="text_font(this)">
<i class="fa-solid fa-coffee fa-fw"></i>
<strong class="mb-3">Coffee</strong>
</li>
<li class="icon-box" onclick="text_font(this)">
<i class="fa-solid fa-cog fa-fw"></i>
<strong class="mb-3">Cog</strong>
</li>
<li class="icon-box" onclick="text_font(this)">
<i class="fa-solid fa-cogs fa-fw"></i>
<strong class="mb-3">Cogs</strong>
</li>
<li class="icon-box" onclick="text_font(this)">
<i class="fa-solid fa-columns fa-fw"></i>
<strong class="mb-3">Columns</strong>
</li>
<li class="icon-box" onclick="text_font(this)">
<i class="fa-solid fa-comment fa-fw"></i>
<strong class="mb-3">Comment</strong>
</li>
<li class="icon-box" onclick="text_font(this)">
<i class="fa-solid fa-comment fa-fw"></i>
<strong class="mb-3">Comment o</strong>
</li>
<li class="icon-box" onclick="text_font(this)">
<i class="fa-solid fa-commenting fa-fw"></i>
<strong class="mb-3">Commenting</strong>
</li>
<li class="icon-box" onclick="text_font(this)">
<i class="fa-solid fa-commenting fa-fw"></i>
<strong class="mb-3">Commenting o</strong>
</li>
<li class="icon-box" onclick="text_font(this)">
<i class="fa-solid fa-comments fa-fw"></i>
<strong class="mb-3">Comments</strong>
</li>
<li class="icon-box" onclick="text_font(this)">
<i class="fa-solid fa-comments fa-fw"></i>
<strong class="mb-3">Comments o</strong>
</li>
<li class="icon-box" onclick="text_font(this)">
<i class="fa-solid fa-compass fa-fw"></i>
<strong class="mb-3">Compass</strong>
</li>
<li class="icon-box" onclick="text_font(this)">
<i class="fa-solid fa-compress fa-fw"></i>
<strong class="mb-3">Compress</strong>
</li>
<li class="icon-box" onclick="text_font(this)">
<i class="fa-solid fa-brands fa-connectdevelop fa-fw"></i>
<strong class="mb-3">Connectdevelop</strong>
</li>
<li class="icon-box" onclick="text_font(this)">
<i class="fa-solid fa-brands fa-contao fa-fw"></i>
<strong class="mb-3">Contao</strong>
</li>
<li class="icon-box" onclick="text_font(this)">
<i class="fa-solid fa-copyright fa-fw"></i>
<strong class="mb-3">Copyright</strong>
</li>
<li class="icon-box" onclick="text_font(this)">
<i class="fa-solid fa-brands fa-creative-commons fa-fw"></i>
<strong class="mb-3">Creative commons</strong>
</li>
<li class="icon-box" onclick="text_font(this)">
<i class="fa-solid fa-credit-card fa-fw"></i>
<strong class="mb-3">Credit card</strong>
</li>
<li class="icon-box" onclick="text_font(this)">
<i class="fa-solid fa-crop fa-fw"></i>
<strong class="mb-3">Crop</strong>
</li>
<li class="icon-box" onclick="text_font(this)">
<i class="fa-solid fa-crosshairs fa-fw"></i>
<strong class="mb-3">Crosshairs</strong>
</li>
<li class="icon-box" onclick="text_font(this)">
<i class="fa-solid fa-brands fa-css3 fa-fw"></i>
<strong class="mb-3">Css3</strong>
</li>
<li class="icon-box" onclick="text_font(this)">
<i class="fa-solid fa-cube fa-fw"></i>
<strong class="mb-3">Cube</strong>
</li>
<li class="icon-box" onclick="text_font(this)">
<i class="fa-solid fa-cubes fa-fw"></i>
<strong class="mb-3">Cubes</strong>
</li>
<li class="icon-box" onclick="text_font(this)">
<i class="fa-solid fa-cutlery fa-fw"></i>
<strong class="mb-3">Cutlery</strong>
</li>
<li class="icon-box" onclick="text_font(this)">
<i class="fa-solid fa-brands fa-dashcube fa-fw"></i>
<strong class="mb-3">Dashcube</strong>
</li>
<li class="icon-box" onclick="text_font(this)">
<i class="fa-solid fa-database fa-fw"></i>
<strong class="mb-3">Database</strong>
</li>
<li class="icon-box" onclick="text_font(this)">
<i class="fa-solid fa-delicious fa-fw"></i>
<strong class="mb-3">Delicious</strong>
</li>
<li class="icon-box" onclick="text_font(this)">
<i class="fa-solid fa-desktop fa-fw"></i>
<strong class="mb-3">Desktop</strong>
</li>
<li class="icon-box" onclick="text_font(this)">
<i class="fa-solid fa-brands fa-deviantart fa-fw"></i>
<strong class="mb-3">Deviantart</strong>
</li>
<li class="icon-box" onclick="text_font(this)">
<i class="fa-solid fa-diamond fa-fw"></i>
<strong class="mb-3">Diamond</strong>
</li>
<li class="icon-box" onclick="text_font(this)">
<i class="fa-solid fa-brands fa-digg fa-fw"></i>
<strong class="mb-3">Digg</strong>
</li>
<li class="icon-box" onclick="text_font(this)">
<i class="fa-solid fa-dot-circle fa-fw"></i>
<strong class="mb-3">Dot circle o</strong>
</li>
<li class="icon-box" onclick="text_font(this)">
<i class="fa-solid fa-download fa-fw"></i>
<strong class="mb-3">Download</strong>
</li>
<li class="icon-box" onclick="text_font(this)">
<i class="fa-solid fa-brands fa-dribbble fa-fw"></i>
<strong class="mb-3">Dribbble</strong>
</li>
<li class="icon-box" onclick="text_font(this)">
<i class="fa-solid fa-brands fa-dropbox fa-fw"></i>
<strong class="mb-3">Dropbox</strong>
</li>
<li class="icon-box" onclick="text_font(this)">
<i class="fa-solid fa-brands fa-drupal fa-fw"></i>
<strong class="mb-3">Drupal</strong>
</li>
<li class="icon-box" onclick="text_font(this)">
<i class="fa-solid fa-eject fa-fw"></i>
<strong class="mb-3">Eject</strong>
</li>
<li class="icon-box" onclick="text_font(this)">
<i class="fa-solid fa-ellipsis-h fa-fw"></i>
<strong class="mb-3">Ellipsis h</strong>
</li>
<li class="icon-box" onclick="text_font(this)">
<i class="fa-solid fa-ellipsis-v fa-fw"></i>
<strong class="mb-3">Ellipsis v</strong>
</li>
<li class="icon-box" onclick="text_font(this)">
<i class="fa-solid fa-brands fa-empire fa-fw"></i>
<strong class="mb-3">Empire</strong>
</li>
<li class="icon-box" onclick="text_font(this)">
<i class="fa-solid fa-envelope fa-fw"></i>
<strong class="mb-3">Envelope</strong>
</li>
<li class="icon-box" onclick="text_font(this)">
<i class="fa-solid fa-envelope fa-fw"></i>
<strong class="mb-3">Envelope o</strong>
</li>
<li class="icon-box" onclick="text_font(this)">
<i class="fa-solid fa-envelope-square fa-fw"></i>
<strong class="mb-3">Envelope square</strong>
</li>
<li class="icon-box" onclick="text_font(this)">
<i class="fa-solid fa-eraser fa-fw"></i>
<strong class="mb-3">Eraser</strong>
</li>
<li class="icon-box" onclick="text_font(this)">
<i class="fa-solid fa-eur fa-fw"></i>
<strong class="mb-3">Eur</strong>
</li>
<li class="icon-box" onclick="text_font(this)">
<i class="fa-solid fa-exchange fa-fw"></i>
<strong class="mb-3">Exchange</strong>
</li>
<li class="icon-box" onclick="text_font(this)">
<i class="fa-solid fa-exclamation fa-fw"></i>
<strong class="mb-3">Exclamation</strong>
</li>
<li class="icon-box" onclick="text_font(this)">
<i class="fa-solid fa-exclamation-circle fa-fw"></i>
<strong class="mb-3">Exclamation circle</strong>
</li>
<li class="icon-box" onclick="text_font(this)">
<i class="fa-solid fa-exclamation-triangle fa-fw"></i>
<strong class="mb-3">Exclamation triangle</strong>
</li>
<li class="icon-box" onclick="text_font(this)">
<i class="fa-solid fa-expand fa-fw"></i>
<strong class="mb-3">Expand</strong>
</li>
<li class="icon-box" onclick="text_font(this)">
<i class="fa-solid fa-brands fa-expeditedssl fa-fw"></i>
<strong class="mb-3">Expeditedssl</strong>
</li>
<li class="icon-box" onclick="text_font(this)">
<i class="fa-solid fa-external-link fa-fw"></i>
<strong class="mb-3">External link</strong>
</li>
<li class="icon-box" onclick="text_font(this)">
<i class="fa-solid fa-external-link-square fa-fw"></i>
<strong class="mb-3">External link square</strong>
</li>
<li class="icon-box" onclick="text_font(this)">
<i class="fa-solid fa-eye fa-fw"></i>
<strong class="mb-3">Eye</strong>
</li>
<li class="icon-box" onclick="text_font(this)">
<i class="fa-solid fa-eye-slash fa-fw"></i>
<strong class="mb-3">Eye slash</strong>
</li>
<li class="icon-box" onclick="text_font(this)">
<i class="fa-solid fa-eyedropper fa-fw"></i>
<strong class="mb-3">Eyedropper</strong>
</li>
<li class="icon-box" onclick="text_font(this)">
<i class="fa-solid fa-brands fa-facebook fa-fw"></i>
<strong class="mb-3">Facebook</strong>
</li>
<li class="icon-box" onclick="text_font(this)">
<i class="fa-solid fa-brands fa-facebook-square fa-fw"></i>
<strong class="mb-3">Facebook square</strong>
</li>
<li class="icon-box" onclick="text_font(this)">
<i class="fa-solid fa-fast-backward fa-fw"></i>
<strong class="mb-3">Fast backward</strong>
</li>
<li class="icon-box" onclick="text_font(this)">
<i class="fa-solid fa-fast-forward fa-fw"></i>
<strong class="mb-3">Fast forward</strong>
</li>
<li class="icon-box" onclick="text_font(this)">
<i class="fa-solid fa-fax fa-fw"></i>
<strong class="mb-3">Fax</strong>
</li>
<li class="icon-box" onclick="text_font(this)">
<i class="fa-solid fa-female fa-fw"></i>
<strong class="mb-3">Female</strong>
</li>
<li class="icon-box" onclick="text_font(this)">
<i class="fa-solid fa-fighter-jet fa-fw"></i>
<strong class="mb-3">Fighter jet</strong>
</li>
<li class="icon-box" onclick="text_font(this)">
<i class="fa-solid fa-file fa-fw"></i>
<strong class="mb-3">File</strong>
</li>
<li class="icon-box" onclick="text_font(this)">
<i class="fa-solid fa-file-archive fa-fw"></i>
<strong class="mb-3">File archive o</strong>
</li>
<li class="icon-box" onclick="text_font(this)">
<i class="fa-solid fa-file-audio fa-fw"></i>
<strong class="mb-3">File audio o</strong>
</li>
<li class="icon-box" onclick="text_font(this)">
<i class="fa-solid fa-file-code fa-fw"></i>
<strong class="mb-3">File code o</strong>
</li>
<li class="icon-box" onclick="text_font(this)">
<i class="fa-solid fa-file-excel fa-fw"></i>
<strong class="mb-3">File excel o</strong>
</li>
<li class="icon-box" onclick="text_font(this)">
<i class="fa-solid fa-file-image fa-fw"></i>
<strong class="mb-3">File image o</strong>
</li>
<li class="icon-box" onclick="text_font(this)">
<i class="fa-solid fa-file-pdf fa-fw"></i>
<strong class="mb-3">File pdf o</strong>
</li>
<li class="icon-box" onclick="text_font(this)">
<i class="fa-solid fa-file-powerpoint fa-fw"></i>
<strong class="mb-3">File powerpoint o</strong>
</li>
<li class="icon-box" onclick="text_font(this)">
<i class="fa-solid fa-file-text fa-fw"></i>
<strong class="mb-3">File text</strong>
</li>
<li class="icon-box" onclick="text_font(this)">
<i class="fa-solid fa-file-text fa-fw"></i>
<strong class="mb-3">File text o</strong>
</li>
<li class="icon-box" onclick="text_font(this)">
<i class="fa-solid fa-file-video fa-fw"></i>
<strong class="mb-3">File video o</strong>
</li>
<li class="icon-box" onclick="text_font(this)">
<i class="fa-solid fa-file-word fa-fw"></i>
<strong class="mb-3">File word o</strong>
</li>
<li class="icon-box" onclick="text_font(this)">
<i class="fa-solid fa-film fa-fw"></i>
<strong class="mb-3">Film</strong>
</li>
<li class="icon-box" onclick="text_font(this)">
<i class="fa-solid fa-filter fa-fw"></i>
<strong class="mb-3">Filter</strong>
</li>
<li class="icon-box" onclick="text_font(this)">
<i class="fa-solid fa-fire fa-fw"></i>
<strong class="mb-3">Fire</strong>
</li>
<li class="icon-box" onclick="text_font(this)">
<i class="fa-solid fa-fire-extinguisher fa-fw"></i>
<strong class="mb-3">Fire extinguisher</strong>
</li>
<li class="icon-box" onclick="text_font(this)">
<i class="fa-solid fa-firefox fa-fw"></i>
<strong class="mb-3">Firefox</strong>
</li>
<li class="icon-box" onclick="text_font(this)">
<i class="fa-solid fa-flag fa-fw"></i>
<strong class="mb-3">Flag</strong>
</li>
<li class="icon-box" onclick="text_font(this)">
<i class="fa-solid fa-flag-checkered fa-fw"></i>
<strong class="mb-3">Flag checkered</strong>
</li>
<li class="icon-box" onclick="text_font(this)">
<i class="fa-solid fa-flag fa-fw"></i>
<strong class="mb-3">Flag o</strong>
</li>
<li class="icon-box" onclick="text_font(this)">
<i class="fa-solid fa-flask fa-fw"></i>
<strong class="mb-3">Flask</strong>
</li>
<li class="icon-box" onclick="text_font(this)">
<i class="fa-solid fa-flickr fa-fw"></i>
<strong class="mb-3">Flickr</strong>
</li>
<li class="icon-box" onclick="text_font(this)">
<i class="fa-solid fa-folder fa-fw"></i>
<strong class="mb-3">Folder</strong>
</li>
<li class="icon-box" onclick="text_font(this)">
<i class="fa-solid fa-folder fa-fw"></i>
<strong class="mb-3">Folder o</strong>
</li>
<li class="icon-box" onclick="text_font(this)">
<i class="fa-solid fa-folder-open fa-fw"></i>
<strong class="mb-3">Folder open</strong>
</li>
<li class="icon-box" onclick="text_font(this)">
<i class="fa-solid fa-folder-open fa-fw"></i>
<strong class="mb-3">Folder open o</strong>
</li>
<li class="icon-box" onclick="text_font(this)">
<i class="fa-solid fa-font fa-fw"></i>
<strong class="mb-3">Font</strong>
</li>
<li class="icon-box" onclick="text_font(this)">
<i class="fa-solid fa-brands fa-fonticons fa-fw"></i>
<strong class="mb-3">Fonticons</strong>
</li>
<li class="icon-box" onclick="text_font(this)">
<i class="fa-solid fa-brands fa-forumbee fa-fw"></i>
<strong class="mb-3">Forumbee</strong>
</li>
<li class="icon-box" onclick="text_font(this)">
<i class="fa-solid fa-forward fa-fw"></i>
<strong class="mb-3">Forward</strong>
</li>
<li class="icon-box" onclick="text_font(this)">
<i class="fa-solid fa-brands fa-foursquare fa-fw"></i>
<strong class="mb-3">Foursquare</strong>
</li>
<li class="icon-box" onclick="text_font(this)">
<i class="fa-solid fa-frown fa-fw"></i>
<strong class="mb-3">Frown o</strong>
</li>
<li class="icon-box" onclick="text_font(this)">
<i class="fa-solid fa-futbol fa-fw"></i>
<strong class="mb-3">Futbol o</strong>
</li>
<li class="icon-box" onclick="text_font(this)">
<i class="fa-solid fa-gamepad fa-fw"></i>
<strong class="mb-3">Gamepad</strong>
</li>
<li class="icon-box" onclick="text_font(this)">
<i class="fa-solid fa-gavel fa-fw"></i>
<strong class="mb-3">Gavel</strong>
</li>
<li class="icon-box" onclick="text_font(this)">
<i class="fa-solid fa-gbp fa-fw"></i>
<strong class="mb-3">Gbp</strong>
</li>
<li class="icon-box" onclick="text_font(this)">
<i class="fa-solid fa-genderless fa-fw"></i>
<strong class="mb-3">Genderless</strong>
</li>
<li class="icon-box" onclick="text_font(this)">
<i class="fa-solid fa-brands fa-get-pocket fa-fw"></i>
<strong class="mb-3">Get pocket</strong>
</li>
<li class="icon-box" onclick="text_font(this)">
<i class="fa-solid fa-brands fa-gg fa-fw"></i>
<strong class="mb-3">Gg</strong>
</li>
<li class="icon-box" onclick="text_font(this)">
<i class="fa-solid fa-brands fa-gg-circle fa-fw"></i>
<strong class="mb-3">Gg circle</strong>
</li>
<li class="icon-box" onclick="text_font(this)">
<i class="fa-solid fa-gift fa-fw"></i>
<strong class="mb-3">Gift</strong>
</li>
<li class="icon-box" onclick="text_font(this)">
<i class="fa-solid fa-brands fa-git fa-fw"></i>
<strong class="mb-3">Git</strong>
</li>
<li class="icon-box" onclick="text_font(this)">
<i class="fa-solid fa-brands fa-git-square fa-fw"></i>
<strong class="mb-3">Git square</strong>
</li>
<li class="icon-box" onclick="text_font(this)">
<i class="fa-solid fa-brands fa-github fa-fw"></i>
<strong class="mb-3">Github</strong>
</li>
<li class="icon-box" onclick="text_font(this)">
<i class="fa-solid fa-brands fa-github-alt fa-fw"></i>
<strong class="mb-3">Github alt</strong>
</li>
<li class="icon-box" onclick="text_font(this)">
<i class="fa-solid fa-brands fa-github-square fa-fw"></i>
<strong class="mb-3">Github square</strong>
</li>
<li class="icon-box" onclick="text_font(this)">
<i class="fa-solid fa-globe fa-fw"></i>
<strong class="mb-3">Globe</strong>
</li>
<li class="icon-box" onclick="text_font(this)">
<i class="fa-solid fa-brands fa-google fa-fw"></i>
<strong class="mb-3">Google</strong>
</li>
<li class="icon-box" onclick="text_font(this)">
<i class="fa-solid fa-brands fa-google-plus fa-fw"></i>
<strong class="mb-3">Google plus</strong>
</li>
<li class="icon-box" onclick="text_font(this)">
<i class="fa-solid fa-brands fa-google-plus-square fa-fw"></i>
<strong class="mb-3">Google plus square</strong>
</li>
<li class="icon-box" onclick="text_font(this)">
<i class="fa-solid fa-brands fa-google-wallet fa-fw"></i>
<strong class="mb-3">Google wallet</strong>
</li>
<li class="icon-box" onclick="text_font(this)">
<i class="fa-solid fa-graduation-cap fa-fw"></i>
<strong class="mb-3">Graduation cap</strong>
</li>
<li class="icon-box" onclick="text_font(this)">
<i class="fa-solid fa-brands fa-gratipay fa-fw"></i>
<strong class="mb-3">Gratipay</strong>
</li>
<li class="icon-box" onclick="text_font(this)">
<i class="fa-solid fa-h-square fa-fw"></i>
<strong class="mb-3">H square</strong>
</li>
<li class="icon-box" onclick="text_font(this)">
<i class="fa-solid fa-brands fa-hacker-news fa-fw"></i>
<strong class="mb-3">Hacker news</strong>
</li>
<li class="icon-box" onclick="text_font(this)">
<i class="fa-solid fa-hand-lizard fa-fw"></i>
<strong class="mb-3">Hand lizard o</strong>
</li>
<li class="icon-box" onclick="text_font(this)">
<i class="fa-solid fa-hand-point-down fa-fw"></i>
<strong class="mb-3">Hand o down</strong>
</li>
<li class="icon-box" onclick="text_font(this)">
<i class="fa-solid fa-hand-point-left fa-fw"></i>
<strong class="mb-3">Hand o left</strong>
</li>
<li class="icon-box" onclick="text_font(this)">
<i class="fa-solid fa-hand-point-right fa-fw"></i>
<strong class="mb-3">Hand o right</strong>
</li>
<li class="icon-box" onclick="text_font(this)">
<i class="fa-solid fa-hand-point-up fa-fw"></i>
<strong class="mb-3">Hand o up</strong>
</li>
<li class="icon-box" onclick="text_font(this)">
<i class="fa-solid fa-hand-paper fa-fw"></i>
<strong class="mb-3">Hand paper o</strong>
</li>
<li class="icon-box" onclick="text_font(this)">
<i class="fa-solid fa-hand-peace fa-fw"></i>
<strong class="mb-3">Hand peace o</strong>
</li>
<li class="icon-box" onclick="text_font(this)">
<i class="fa-solid fa-hand-pointer fa-fw"></i>
<strong class="mb-3">Hand pointer o</strong>
</li>
<li class="icon-box" onclick="text_font(this)">
<i class="fa-solid fa-hand-rock fa-fw"></i>
<strong class="mb-3">Hand rock o</strong>
</li>
<li class="icon-box" onclick="text_font(this)">
<i class="fa-solid fa-hand-scissors fa-fw"></i>
<strong class="mb-3">Hand scissors o</strong>
</li>
<li class="icon-box" onclick="text_font(this)">
<i class="fa-solid fa-hand-spock fa-fw"></i>
<strong class="mb-3">Hand spock o</strong>
</li>
<li class="icon-box" onclick="text_font(this)">
<i class="fa-solid fa-hdd fa-fw"></i>
<strong class="mb-3">Hdd o</strong>
</li>
<li class="icon-box" onclick="text_font(this)">
<i class="fa-solid fa-header fa-fw"></i>
<strong class="mb-3">Header</strong>
</li>
<li class="icon-box" onclick="text_font(this)">
<i class="fa-solid fa-headphones fa-fw"></i>
<strong class="mb-3">Headphones</strong>
</li>
<li class="icon-box" onclick="text_font(this)">
<i class="fa-solid fa-heart fa-fw"></i>
<strong class="mb-3">Heart</strong>
</li>
<li class="icon-box" onclick="text_font(this)">
<i class="fa-solid fa-heart fa-fw"></i>
<strong class="mb-3">Heart o</strong>
</li>
<li class="icon-box" onclick="text_font(this)">
<i class="fa-solid fa-heartbeat fa-fw"></i>
<strong class="mb-3">Heartbeat</strong>
</li>
<li class="icon-box" onclick="text_font(this)">
<i class="fa-solid fa-history fa-fw"></i>
<strong class="mb-3">History</strong>
</li>
<li class="icon-box" onclick="text_font(this)">
<i class="fa-solid fa-home fa-fw"></i>
<strong class="mb-3">Home</strong>
</li>
<li class="icon-box" onclick="text_font(this)">
<i class="fa-solid fa-hospital fa-fw"></i>
<strong class="mb-3">Hospital o</strong>
</li>
<li class="icon-box" onclick="text_font(this)">
<i class="fa-solid fa-hourglass fa-fw"></i>
<strong class="mb-3">Hourglass</strong>
</li>
<li class="icon-box" onclick="text_font(this)">
<i class="fa-solid fa-hourglass-end fa-fw"></i>
<strong class="mb-3">Hourglass end</strong>
</li>
<li class="icon-box" onclick="text_font(this)">
<i class="fa-solid fa-hourglass-half fa-fw"></i>
<strong class="mb-3">Hourglass half</strong>
</li>
<li class="icon-box" onclick="text_font(this)">
<i class="fa-solid fa-hourglass fa-fw"></i>
<strong class="mb-3">Hourglass o</strong>
</li>
<li class="icon-box" onclick="text_font(this)">
<i class="fa-solid fa-hourglass-start fa-fw"></i>
<strong class="mb-3">Hourglass start</strong>
</li>
<li class="icon-box" onclick="text_font(this)">
<i class="fa-solid fa-brands fa-houzz fa-fw"></i>
<strong class="mb-3">Houzz</strong>
</li>
<li class="icon-box" onclick="text_font(this)">
<i class="fa-solid fa-brands fa-html5 fa-fw"></i>
<strong class="mb-3">Html5</strong>
</li>
<li class="icon-box" onclick="text_font(this)">
<i class="fa-solid fa-i-cursor fa-fw"></i>
<strong class="mb-3">I cursor</strong>
</li>
<li class="icon-box" onclick="text_font(this)">
<i class="fa-solid fa-ils fa-fw"></i>
<strong class="mb-3">Ils</strong>
</li>
<li class="icon-box" onclick="text_font(this)">
<i class="fa-solid fa-inbox fa-fw"></i>
<strong class="mb-3">Inbox</strong>
</li>
<li class="icon-box" onclick="text_font(this)">
<i class="fa-solid fa-indent fa-fw"></i>
<strong class="mb-3">Indent</strong>
</li>
<li class="icon-box" onclick="text_font(this)">
<i class="fa-solid fa-industry fa-fw"></i>
<strong class="mb-3">Industry</strong>
</li>
<li class="icon-box" onclick="text_font(this)">
<i class="fa-solid fa-info fa-fw"></i>
<strong class="mb-3">Info</strong>
</li>
<li class="icon-box" onclick="text_font(this)">
<i class="fa-solid fa-info-circle fa-fw"></i>
<strong class="mb-3">Info circle</strong>
</li>
<li class="icon-box" onclick="text_font(this)">
<i class="fa-solid fa-inr fa-fw"></i>
<strong class="mb-3">Inr</strong>
</li>
<li class="icon-box" onclick="text_font(this)">
<i class="fa-solid fa-brands fa-instagram fa-fw"></i>
<strong class="mb-3">Instagram</strong>
</li>
<li class="icon-box" onclick="text_font(this)">
<i class="fa-solid fa-brands fa-internet-explorer fa-fw"></i>
<strong class="mb-3">Internet explorer</strong>
</li>
<li class="icon-box" onclick="text_font(this)">
<i class="fa-solid fa-brands fa-ioxhost fa-fw"></i>
<strong class="mb-3">Ioxhost</strong>
</li>
<li class="icon-box" onclick="text_font(this)">
<i class="fa-solid fa-italic fa-fw"></i>
<strong class="mb-3">Italic</strong>
</li>
<li class="icon-box" onclick="text_font(this)">
<i class="fa-solid fa-brands fa-joomla fa-fw"></i>
<strong class="mb-3">Joomla</strong>
</li>
<li class="icon-box" onclick="text_font(this)">
<i class="fa-solid fa-jpy fa-fw"></i>
<strong class="mb-3">Jpy</strong>
</li>
<li class="icon-box" onclick="text_font(this)">
<i class="fa-solid fa-brands fa-jsfiddle fa-fw"></i>
<strong class="mb-3">Jsfiddle</strong>
</li>
<li class="icon-box" onclick="text_font(this)">
<i class="fa-solid fa-key fa-fw"></i>
<strong class="mb-3">Key</strong>
</li>
<li class="icon-box" onclick="text_font(this)">
<i class="fa-solid fa-keyboard fa-fw"></i>
<strong class="mb-3">Keyboard o</strong>
</li>
<li class="icon-box" onclick="text_font(this)">
<i class="fa-solid fa-krw fa-fw"></i>
<strong class="mb-3">Krw</strong>
</li>
<li class="icon-box" onclick="text_font(this)">
<i class="fa-solid fa-language fa-fw"></i>
<strong class="mb-3">Language</strong>
</li>
<li class="icon-box" onclick="text_font(this)">
<i class="fa-solid fa-laptop fa-fw"></i>
<strong class="mb-3">Laptop</strong>
</li>
<li class="icon-box" onclick="text_font(this)">
<i class="fa-solid fa-lastfm fa-fw"></i>
<strong class="mb-3">Lastfm</strong>
</li>
<li class="icon-box" onclick="text_font(this)">
<i class="fa-solid fa-lastfm-square fa-fw"></i>
<strong class="mb-3">Lastfm square</strong>
</li>
<li class="icon-box" onclick="text_font(this)">
<i class="fa-solid fa-leaf fa-fw"></i>
<strong class="mb-3">Leaf</strong>
</li>
<li class="icon-box" onclick="text_font(this)">
<i class="fa-solid fa-brands fa-leanpub fa-fw"></i>
<strong class="mb-3">Leanpub</strong>
</li>
<li class="icon-box" onclick="text_font(this)">
<i class="fa-solid fa-lemon fa-fw"></i>
<strong class="mb-3">Lemon o</strong>
</li>
<li class="icon-box" onclick="text_font(this)">
<i class="fa-solid fa-level-down fa-fw"></i>
<strong class="mb-3">Level down</strong>
</li>
<li class="icon-box" onclick="text_font(this)">
<i class="fa-solid fa-level-up fa-fw"></i>
<strong class="mb-3">Level up</strong>
</li>
<li class="icon-box" onclick="text_font(this)">
<i class="fa-solid fa-life-ring fa-fw"></i>
<strong class="mb-3">Life ring</strong>
</li>
<li class="icon-box" onclick="text_font(this)">
<i class="fa-solid fa-lightbulb fa-fw"></i>
<strong class="mb-3">Lightbulb o</strong>
</li>
<li class="icon-box" onclick="text_font(this)">
<i class="fa-solid fa-line-chart fa-fw"></i>
<strong class="mb-3">Line chart</strong>
</li>
<li class="icon-box" onclick="text_font(this)">
<i class="fa-solid fa-link fa-fw"></i>
<strong class="mb-3">Link</strong>
</li>
<li class="icon-box" onclick="text_font(this)">
<i class="fa-solid fa-brands fa-linkedin fa-fw"></i>
<strong class="mb-3">Linkedin</strong>
</li>
<li class="icon-box" onclick="text_font(this)">
<i class="fa-solid fa-brands fa-linux fa-fw"></i>
<strong class="mb-3">Linux</strong>
</li>
<li class="icon-box" onclick="text_font(this)">
<i class="fa-solid fa-list fa-fw"></i>
<strong class="mb-3">List</strong>
</li>
<li class="icon-box" onclick="text_font(this)">
<i class="fa-solid fa-list-alt fa-fw"></i>
<strong class="mb-3">List alt</strong>
</li>
<li class="icon-box" onclick="text_font(this)">
<i class="fa-solid fa-list-ol fa-fw"></i>
<strong class="mb-3">List ol</strong>
</li>
<li class="icon-box" onclick="text_font(this)">
<i class="fa-solid fa-list-ul fa-fw"></i>
<strong class="mb-3">List ul</strong>
</li>
<li class="icon-box" onclick="text_font(this)">
<i class="fa-solid fa-location-arrow fa-fw"></i>
<strong class="mb-3">Location arrow</strong>
</li>
<li class="icon-box" onclick="text_font(this)">
<i class="fa-solid fa-lock fa-fw"></i>
<strong class="mb-3">Lock</strong>
</li>
<li class="icon-box" onclick="text_font(this)">
<i class="fa-solid fa-long-arrow-down fa-fw"></i>
<strong class="mb-3">Long arrow down</strong>
</li>
<li class="icon-box" onclick="text_font(this)">
<i class="fa-solid fa-long-arrow-left fa-fw"></i>
<strong class="mb-3">Long arrow left</strong>
</li>
<li class="icon-box" onclick="text_font(this)">
<i class="fa-solid fa-long-arrow-right fa-fw"></i>
<strong class="mb-3">Long arrow right</strong>
</li>
<li class="icon-box" onclick="text_font(this)">
<i class="fa-solid fa-long-arrow-up fa-fw"></i>
<strong class="mb-3">Long arrow up</strong>
</li>
<li class="icon-box" onclick="text_font(this)">
<i class="fa-solid fa-magic fa-fw"></i>
<strong class="mb-3">Magic</strong>
</li>
<li class="icon-box" onclick="text_font(this)">
<i class="fa-solid fa-magnet fa-fw"></i>
<strong class="mb-3">Magnet</strong>
</li>
<li class="icon-box" onclick="text_font(this)">
<i class="fa-solid fa-male fa-fw"></i>
<strong class="mb-3">Male</strong>
</li>
<li class="icon-box" onclick="text_font(this)">
<i class="fa-solid fa-map fa-fw"></i>
<strong class="mb-3">Map</strong>
</li>
<li class="icon-box" onclick="text_font(this)">
<i class="fa-solid fa-map-marker fa-fw"></i>
<strong class="mb-3">Map marker</strong>
</li>
<li class="icon-box" onclick="text_font(this)">
<i class="fa-solid fa-map fa-fw"></i>
<strong class="mb-3">Map o</strong>
</li>
<li class="icon-box" onclick="text_font(this)">
<i class="fa-solid fa-map-pin fa-fw"></i>
<strong class="mb-3">Map pin</strong>
</li>
<li class="icon-box" onclick="text_font(this)">
<i class="fa-solid fa-map-signs fa-fw"></i>
<strong class="mb-3">Map signs</strong>
</li>
<li class="icon-box" onclick="text_font(this)">
<i class="fa-solid fa-mars fa-fw"></i>
<strong class="mb-3">Mars</strong>
</li>
<li class="icon-box" onclick="text_font(this)">
<i class="fa-solid fa-mars-double fa-fw"></i>
<strong class="mb-3">Mars double</strong>
</li>
<li class="icon-box" onclick="text_font(this)">
<i class="fa-solid fa-mars-stroke fa-fw"></i>
<strong class="mb-3">Mars stroke</strong>
</li>
<li class="icon-box" onclick="text_font(this)">
<i class="fa-solid fa-mars-stroke-h fa-fw"></i>
<strong class="mb-3">Mars stroke h</strong>
</li>
<li class="icon-box" onclick="text_font(this)">
<i class="fa-solid fa-mars-stroke-v fa-fw"></i>
<strong class="mb-3">Mars stroke v</strong>
</li>
<li class="icon-box" onclick="text_font(this)">
<i class="fa-solid fa-brands fa-maxcdn fa-fw"></i>
<strong class="mb-3">Maxcdn</strong>
</li>
<li class="icon-box" onclick="text_font(this)">
<i class="fa-solid fa-brands fa-medium fa-fw"></i>
<strong class="mb-3">Medium</strong>
</li>
<li class="icon-box" onclick="text_font(this)">
<i class="fa-solid fa-medkit fa-fw"></i>
<strong class="mb-3">Medkit</strong>
</li>
<li class="icon-box" onclick="text_font(this)">
<i class="fa-solid fa-meh fa-fw"></i>
<strong class="mb-3">Meh o</strong>
</li>
<li class="icon-box" onclick="text_font(this)">
<i class="fa-solid fa-mercury fa-fw"></i>
<strong class="mb-3">Mercury</strong>
</li>
<li class="icon-box" onclick="text_font(this)">
<i class="fa-solid fa-microphone fa-fw"></i>
<strong class="mb-3">Microphone</strong>
</li>
<li class="icon-box" onclick="text_font(this)">
<i class="fa-solid fa-microphone-slash fa-fw"></i>
<strong class="mb-3">Microphone slash</strong>
</li>
<li class="icon-box" onclick="text_font(this)">
<i class="fa-solid fa-minus fa-fw"></i>
<strong class="mb-3">Minus</strong>
</li>
<li class="icon-box" onclick="text_font(this)">
<i class="fa-solid fa-minus-circle fa-fw"></i>
<strong class="mb-3">Minus circle</strong>
</li>
<li class="icon-box" onclick="text_font(this)">
<i class="fa-solid fa-minus-square fa-fw"></i>
<strong class="mb-3">Minus square</strong>
</li>
<li class="icon-box" onclick="text_font(this)">
<i class="fa-solid fa-minus-square fa-fw"></i>
<strong class="mb-3">Minus square o</strong>
</li>
<li class="icon-box" onclick="text_font(this)">
<i class="fa-solid fa-mobile fa-fw"></i>
<strong class="mb-3">Mobile</strong>
</li>
<li class="icon-box" onclick="text_font(this)">
<i class="fa-solid fa-moon fa-fw"></i>
<strong class="mb-3">Moon o</strong>
</li>
<li class="icon-box" onclick="text_font(this)">
<i class="fa-solid fa-motorcycle fa-fw"></i>
<strong class="mb-3">Motorcycle</strong>
</li>
<li class="icon-box" onclick="text_font(this)">
<i class="fa-solid fa-mouse-pointer fa-fw"></i>
<strong class="mb-3">Mouse pointer</strong>
</li>
<li class="icon-box" onclick="text_font(this)">
<i class="fa-solid fa-music fa-fw"></i>
<strong class="mb-3">Music</strong>
</li>
<li class="icon-box" onclick="text_font(this)">
<i class="fa-solid fa-neuter fa-fw"></i>
<strong class="mb-3">Neuter</strong>
</li>
<li class="icon-box" onclick="text_font(this)">
<i class="fa-solid fa-newspaper fa-fw"></i>
<strong class="mb-3">Newspaper o</strong>
</li>
<li class="icon-box" onclick="text_font(this)">
<i class="fa-solid fa-object-group fa-fw"></i>
<strong class="mb-3">Object group</strong>
</li>
<li class="icon-box" onclick="text_font(this)">
<i class="fa-solid fa-object-ungroup fa-fw"></i>
<strong class="mb-3">Object ungroup</strong>
</li>
<li class="icon-box" onclick="text_font(this)">
<i class="fa-solid fa-brands fa-odnoklassniki fa-fw"></i>
<strong class="mb-3">Odnoklassniki</strong>
</li>
<li class="icon-box" onclick="text_font(this)">
<i class="fa-solid fa-brands fa-odnoklassniki-square fa-fw"></i>
<strong class="mb-3">Odnoklassniki square</strong>
</li>
<li class="icon-box" onclick="text_font(this)">
<i class="fa-solid fa-brands fa-opencart fa-fw"></i>
<strong class="mb-3">Opencart</strong>
</li>
<li class="icon-box" onclick="text_font(this)">
<i class="fa-solid fa-brands fa-openid fa-fw"></i>
<strong class="mb-3">Openid</strong>
</li>
<li class="icon-box" onclick="text_font(this)">
<i class="fa-solid fa-brands fa-opera fa-fw"></i>
<strong class="mb-3">Opera</strong>
</li>
<li class="icon-box" onclick="text_font(this)">
<i class="fa-solid fa-brands fa-optin-monster fa-fw"></i>
<strong class="mb-3">Optin monster</strong>
</li>
<li class="icon-box" onclick="text_font(this)">
<i class="fa-solid fa-outdent fa-fw"></i>
<strong class="mb-3">Outdent</strong>
</li>
<li class="icon-box" onclick="text_font(this)">
<i class="fa-solid fa-brands fa-pagelines fa-fw"></i>
<strong class="mb-3">Pagelines</strong>
</li>
<li class="icon-box" onclick="text_font(this)">
<i class="fa-solid fa-paint-brush fa-fw"></i>
<strong class="mb-3">Paint brush</strong>
</li>
<li class="icon-box" onclick="text_font(this)">
<i class="fa-solid fa-paper-plane fa-fw"></i>
<strong class="mb-3">Paper plane</strong>
</li>
<li class="icon-box" onclick="text_font(this)">
<i class="fa-solid fa-paper-plane fa-fw"></i>
<strong class="mb-3">Paper plane o</strong>
</li>
<li class="icon-box" onclick="text_font(this)">
<i class="fa-solid fa-paperclip fa-fw"></i>
<strong class="mb-3">Paperclip</strong>
</li>
<li class="icon-box" onclick="text_font(this)">
<i class="fa-solid fa-paragraph fa-fw"></i>
<strong class="mb-3">Paragraph</strong>
</li>
<li class="icon-box" onclick="text_font(this)">
<i class="fa-solid fa-pause fa-fw"></i>
<strong class="mb-3">Pause</strong>
</li>
<li class="icon-box" onclick="text_font(this)">
<i class="fa-solid fa-paw fa-fw"></i>
<strong class="mb-3">Paw</strong>
</li>
<li class="icon-box" onclick="text_font(this)">
<i class="fa-solid fa-brands fa-paypal fa-fw"></i>
<strong class="mb-3">Paypal</strong>
</li>
<li class="icon-box" onclick="text_font(this)">
<i class="fa-solid fa-pencil fa-fw"></i>
<strong class="mb-3">Pencil</strong>
</li>
<li class="icon-box" onclick="text_font(this)">
<i class="fa-solid fa-pencil-square fa-fw"></i>
<strong class="mb-3">Pencil square</strong>
</li>
<li class="icon-box" onclick="text_font(this)">
<i class="fa-solid fa-pencil-square fa-fw"></i>
<strong class="mb-3">Pencil square o</strong>
</li>
<li class="icon-box" onclick="text_font(this)">
<i class="fa-solid fa-phone fa-fw"></i>
<strong class="mb-3">Phone</strong>
</li>
<li class="icon-box" onclick="text_font(this)">
<i class="fa-solid fa-phone-square fa-fw"></i>
<strong class="mb-3">Phone square</strong>
</li>
<li class="icon-box" onclick="text_font(this)">
<i class="fa-solid fa-pie-chart fa-fw"></i>
<strong class="mb-3">Pie chart</strong>
</li>
<li class="icon-box" onclick="text_font(this)">
<i class="fa-solid fa-brands fa-pied-piper fa-fw"></i>
<strong class="mb-3">Pied piper</strong>
</li>
<li class="icon-box" onclick="text_font(this)">
<i class="fa-solid fa-brands fa-pied-piper-alt fa-fw"></i>
<strong class="mb-3">Pied piper alt</strong>
</li>
<li class="icon-box" onclick="text_font(this)">
<i class="fa-solid fa-brands fa-pinterest fa-fw"></i>
<strong class="mb-3">Pinterest</strong>
</li>
<li class="icon-box" onclick="text_font(this)">
<i class="fa-solid fa-brands fa-pinterest-p fa-fw"></i>
<strong class="mb-3">Pinterest p</strong>
</li>
<li class="icon-box" onclick="text_font(this)">
<i class="fa-solid fa-brands fa-pinterest-square fa-fw"></i>
<strong class="mb-3">Pinterest square</strong>
</li>
<li class="icon-box" onclick="text_font(this)">
<i class="fa-solid fa-plane fa-fw"></i>
<strong class="mb-3">Plane</strong>
</li>
<li class="icon-box" onclick="text_font(this)">
<i class="fa-solid fa-play fa-fw"></i>
<strong class="mb-3">Play</strong>
</li>
<li class="icon-box" onclick="text_font(this)">
<i class="fa-solid fa-play-circle fa-fw"></i>
<strong class="mb-3">Play circle</strong>
</li>
<li class="icon-box" onclick="text_font(this)">
<i class="fa-solid fa-play-circle fa-fw"></i>
<strong class="mb-3">Play circle o</strong>
</li>
<li class="icon-box" onclick="text_font(this)">
<i class="fa-solid fa-plug fa-fw"></i>
<strong class="mb-3">Plug</strong>
</li>
<li class="icon-box" onclick="text_font(this)">
<i class="fa-solid fa-plus fa-fw"></i>
<strong class="mb-3">Plus</strong>
</li>
<li class="icon-box" onclick="text_font(this)">
<i class="fa-solid fa-plus-circle fa-fw"></i>
<strong class="mb-3">Plus circle</strong>
</li>
<li class="icon-box" onclick="text_font(this)">
<i class="fa-solid fa-plus-square fa-fw"></i>
<strong class="mb-3">Plus square</strong>
</li>
<li class="icon-box" onclick="text_font(this)">
<i class="fa-solid fa-plus-square fa-fw"></i>
<strong class="mb-3">Plus square o</strong>
</li>
<li class="icon-box" onclick="text_font(this)">
<i class="fa-solid fa-power-off fa-fw"></i>
<strong class="mb-3">Power off</strong>
</li>
<li class="icon-box" onclick="text_font(this)">
<i class="fa-solid fa-print fa-fw"></i>
<strong class="mb-3">Print</strong>
</li>
<li class="icon-box" onclick="text_font(this)">
<i class="fa-solid fa-puzzle-piece fa-fw"></i>
<strong class="mb-3">Puzzle piece</strong>
</li>
<li class="icon-box" onclick="text_font(this)">
<i class="fa-solid fa-qq fa-fw"></i>
<strong class="mb-3">Qq</strong>
</li>
<li class="icon-box" onclick="text_font(this)">
<i class="fa-solid fa-qrcode fa-fw"></i>
<strong class="mb-3">Qrcode</strong>
</li>
<li class="icon-box" onclick="text_font(this)">
<i class="fa-solid fa-question fa-fw"></i>
<strong class="mb-3">Question</strong>
</li>
<li class="icon-box" onclick="text_font(this)">
<i class="fa-solid fa-question-circle fa-fw"></i>
<strong class="mb-3">Question circle</strong>
</li>
<li class="icon-box" onclick="text_font(this)">
<i class="fa-solid fa-quote-left fa-fw"></i>
<strong class="mb-3">Quote left</strong>
</li>
<li class="icon-box" onclick="text_font(this)">
<i class="fa-solid fa-quote-right fa-fw"></i>
<strong class="mb-3">Quote right</strong>
</li>
<li class="icon-box" onclick="text_font(this)">
<i class="fa-solid fa-random fa-fw"></i>
<strong class="mb-3">Random</strong>
</li>
<li class="icon-box" onclick="text_font(this)">
<i class="fa-solid fa-rebel fa-fw"></i>
<strong class="mb-3">Rebel</strong>
</li>
<li class="icon-box" onclick="text_font(this)">
<i class="fa-solid fa-recycle fa-fw"></i>
<strong class="mb-3">Recycle</strong>
</li>
<li class="icon-box" onclick="text_font(this)">
<i class="fa-solid fa-reddit fa-fw"></i>
<strong class="mb-3">Reddit</strong>
</li>
<li class="icon-box" onclick="text_font(this)">
<i class="fa-solid fa-reddit-square fa-fw"></i>
<strong class="mb-3">Reddit square</strong>
</li>
<li class="icon-box" onclick="text_font(this)">
<i class="fa-solid fa-refresh fa-fw"></i>
<strong class="mb-3">Refresh</strong>
</li>
<li class="icon-box" onclick="text_font(this)">
<i class="fa-solid fa-registered fa-fw"></i>
<strong class="mb-3">Registered</strong>
</li>
<li class="icon-box" onclick="text_font(this)">
<i class="fa-solid fa-renren fa-fw"></i>
<strong class="mb-3">Renren</strong>
</li>
<li class="icon-box" onclick="text_font(this)">
<i class="fa-solid fa-repeat fa-fw"></i>
<strong class="mb-3">Repeat</strong>
</li>
<li class="icon-box" onclick="text_font(this)">
<i class="fa-solid fa-reply fa-fw"></i>
<strong class="mb-3">Reply</strong>
</li>
<li class="icon-box" onclick="text_font(this)">
<i class="fa-solid fa-reply-all fa-fw"></i>
<strong class="mb-3">Reply all</strong>
</li>
<li class="icon-box" onclick="text_font(this)">
<i class="fa-solid fa-retweet fa-fw"></i>
<strong class="mb-3">Retweet</strong>
</li>
<li class="icon-box" onclick="text_font(this)">
<i class="fa-solid fa-road fa-fw"></i>
<strong class="mb-3">Road</strong>
</li>
<li class="icon-box" onclick="text_font(this)">
<i class="fa-solid fa-rocket fa-fw"></i>
<strong class="mb-3">Rocket</strong>
</li>
<li class="icon-box" onclick="text_font(this)">
<i class="fa-solid fa-rss fa-fw"></i>
<strong class="mb-3">Rss</strong>
</li>
<li class="icon-box" onclick="text_font(this)">
<i class="fa-solid fa-rss-square fa-fw"></i>
<strong class="mb-3">Rss square</strong>
</li>
<li class="icon-box" onclick="text_font(this)">
<i class="fa-solid fa-rub fa-fw"></i>
<strong class="mb-3">Rub</strong>
</li>
<li class="icon-box" onclick="text_font(this)">
<i class="fa-solid fa-safari fa-fw"></i>
<strong class="mb-3">Safari</strong>
</li>
<li class="icon-box" onclick="text_font(this)">
<i class="fa-solid fa-scissors fa-fw"></i>
<strong class="mb-3">Scissors</strong>
</li>
<li class="icon-box" onclick="text_font(this)">
<i class="fa-solid fa-search fa-fw"></i>
<strong class="mb-3">Search</strong>
</li>
<li class="icon-box" onclick="text_font(this)">
<i class="fa-solid fa-search-minus fa-fw"></i>
<strong class="mb-3">Search minus</strong>
</li>
<li class="icon-box" onclick="text_font(this)">
<i class="fa-solid fa-search-plus fa-fw"></i>
<strong class="mb-3">Search plus</strong>
</li>
<li class="icon-box" onclick="text_font(this)">
<i class="fa-solid fa-sellsy fa-fw"></i>
<strong class="mb-3">Sellsy</strong>
</li>
<li class="icon-box" onclick="text_font(this)">
<i class="fa-solid fa-server fa-fw"></i>
<strong class="mb-3">Server</strong>
</li>
<li class="icon-box" onclick="text_font(this)">
<i class="fa-solid fa-share fa-fw"></i>
<strong class="mb-3">Share</strong>
</li>
<li class="icon-box" onclick="text_font(this)">
<i class="fa-solid fa-share-alt fa-fw"></i>
<strong class="mb-3">Share alt</strong>
</li>
<li class="icon-box" onclick="text_font(this)">
<i class="fa-solid fa-share-alt-square fa-fw"></i>
<strong class="mb-3">Share alt square</strong>
</li>
<li class="icon-box" onclick="text_font(this)">
<i class="fa-solid fa-share-square fa-fw"></i>
<strong class="mb-3">Share square</strong>
</li>
<li class="icon-box" onclick="text_font(this)">
<i class="fa-solid fa-share-square-o fa-fw"></i>
<strong class="mb-3">Share square o</strong>
</li>
<li class="icon-box" onclick="text_font(this)">
<i class="fa-solid fa-shield fa-fw"></i>
<strong class="mb-3">Shield</strong>
</li>
<li class="icon-box" onclick="text_font(this)">
<i class="fa-solid fa-ship fa-fw"></i>
<strong class="mb-3">Ship</strong>
</li>
<li class="icon-box" onclick="text_font(this)">
<i class="fa-solid fa-shirtsinbulk fa-fw"></i>
<strong class="mb-3">Shirtsinbulk</strong>
</li>
<li class="icon-box" onclick="text_font(this)">
<i class="fa-solid fa-shopping-cart fa-fw"></i>
<strong class="mb-3">Shopping cart</strong>
</li>
<li class="icon-box" onclick="text_font(this)">
<i class="fa-solid fa-sign-in fa-fw"></i>
<strong class="mb-3">Sign in</strong>
</li>
<li class="icon-box" onclick="text_font(this)">
<i class="fa-solid fa-sign-out fa-fw"></i>
<strong class="mb-3">Sign out</strong>
</li>
<li class="icon-box" onclick="text_font(this)">
<i class="fa-solid fa-signal fa-fw"></i>
<strong class="mb-3">Signal</strong>
</li>
<li class="icon-box" onclick="text_font(this)">
<i class="fa-solid fa-brands fa-simplybuilt fa-fw"></i>
<strong class="mb-3">Simplybuilt</strong>
</li>
<li class="icon-box" onclick="text_font(this)">
<i class="fa-solid fa-sitemap fa-fw"></i>
<strong class="mb-3">Sitemap</strong>
</li>
<li class="icon-box" onclick="text_font(this)">
<i class="fa-solid fa-brands fa-skyatlas fa-fw"></i>
<strong class="mb-3">Skyatlas</strong>
</li>
<li class="icon-box" onclick="text_font(this)">
<i class="fa-solid fa-brands fa-skype fa-fw"></i>
<strong class="mb-3">Skype</strong>
</li>
<li class="icon-box" onclick="text_font(this)">
<i class="fa-solid fa-brands fa-slack fa-fw"></i>
<strong class="mb-3">Slack</strong>
</li>
<li class="icon-box" onclick="text_font(this)">
<i class="fa-solid fa-sliders fa-fw"></i>
<strong class="mb-3">Sliders</strong>
</li>
<li class="icon-box" onclick="text_font(this)">
<i class="fa-solid fa-brands fa-slideshare fa-fw"></i>
<strong class="mb-3">Slideshare</strong>
</li>
<li class="icon-box" onclick="text_font(this)">
<i class="fa-solid fa-sort fa-fw"></i>
<strong class="mb-3">Sort</strong>
</li>
<li class="icon-box" onclick="text_font(this)">
<i class="fa-solid fa-sort-alpha-asc fa-fw"></i>
<strong class="mb-3">Sort alpha asc</strong>
</li>
<li class="icon-box" onclick="text_font(this)">
<i class="fa-solid fa-sort-alpha-desc fa-fw"></i>
<strong class="mb-3">Sort alpha desc</strong>
</li>
<li class="icon-box" onclick="text_font(this)">
<i class="fa-solid fa-sort-amount-asc fa-fw"></i>
<strong class="mb-3">Sort amount asc</strong>
</li>
<li class="icon-box" onclick="text_font(this)">
<i class="fa-solid fa-sort-amount-desc fa-fw"></i>
<strong class="mb-3">Sort amount desc</strong>
</li>
<li class="icon-box" onclick="text_font(this)">
<i class="fa-solid fa-sort-asc fa-fw"></i>
<strong class="mb-3">Sort asc</strong>
</li>
<li class="icon-box" onclick="text_font(this)">
<i class="fa-solid fa-sort-desc fa-fw"></i>
<strong class="mb-3">Sort desc</strong>
</li>
<li class="icon-box" onclick="text_font(this)">
<i class="fa-solid fa-sort-numeric-asc fa-fw"></i>
<strong class="mb-3">Sort numeric asc</strong>
</li>
<li class="icon-box" onclick="text_font(this)">
<i class="fa-solid fa-sort-numeric-desc fa-fw"></i>
<strong class="mb-3">Sort numeric desc</strong>
</li>
<li class="icon-box" onclick="text_font(this)">
<i class="fa-solid fa-soundcloud fa-fw"></i>
<strong class="mb-3">Soundcloud</strong>
</li>
<li class="icon-box" onclick="text_font(this)">
<i class="fa-solid fa-space-shuttle fa-fw"></i>
<strong class="mb-3">Space shuttle</strong>
</li>
<li class="icon-box" onclick="text_font(this)">
<i class="fa-solid fa-spinner fa-fw"></i>
<strong class="mb-3">Spinner</strong>
</li>
<li class="icon-box" onclick="text_font(this)">
<i class="fa-solid fa-spoon fa-fw"></i>
<strong class="mb-3">Spoon</strong>
</li>
<li class="icon-box" onclick="text_font(this)">
<i class="fa-solid fa-spotify fa-fw"></i>
<strong class="mb-3">Spotify</strong>
</li>
<li class="icon-box" onclick="text_font(this)">
<i class="fa-solid fa-square fa-fw"></i>
<strong class="mb-3">Square</strong>
</li>
<li class="icon-box" onclick="text_font(this)">
<i class="fa-solid fa-brands fa-stack-exchange fa-fw"></i>
<strong class="mb-3">Stack exchange</strong>
</li>
<li class="icon-box" onclick="text_font(this)">
<i class="fa-solid fa-stack-overflow fa-fw"></i>
<strong class="mb-3">Stack overflow</strong>
</li>
<li class="icon-box" onclick="text_font(this)">
<i class="fa-solid fa-star fa-fw"></i>
<strong class="mb-3">Star</strong>
</li>
<li class="icon-box" onclick="text_font(this)">
<i class="fa-solid fa-star-half fa-fw"></i>
<strong class="mb-3">Star half</strong>
</li>
<li class="icon-box" onclick="text_font(this)">
<i class="fa-solid fa-brands fa-steam fa-fw"></i>
<strong class="mb-3">Steam</strong>
</li>
<li class="icon-box" onclick="text_font(this)">
<i class="fa-solid fa-brands fa-steam-square fa-fw"></i>
<strong class="mb-3">Steam square</strong>
</li>
<li class="icon-box" onclick="text_font(this)">
<i class="fa-solid fa-step-backward fa-fw"></i>
<strong class="mb-3">Step backward</strong>
</li>
<li class="icon-box" onclick="text_font(this)">
<i class="fa-solid fa-step-forward fa-fw"></i>
<strong class="mb-3">Step forward</strong>
</li>
<li class="icon-box" onclick="text_font(this)">
<i class="fa-solid fa-stethoscope fa-fw"></i>
<strong class="mb-3">Stethoscope</strong>
</li>
<li class="icon-box" onclick="text_font(this)">
<i class="fa-solid fa-sticky-note fa-fw"></i>
<strong class="mb-3">Sticky note</strong>
</li>
<li class="icon-box" onclick="text_font(this)">
<i class="fa-solid fa-sticky-note fa-fw"></i>
<strong class="mb-3">Sticky note o</strong>
</li>
<li class="icon-box" onclick="text_font(this)">
<i class="fa-solid fa-stop fa-fw"></i>
<strong class="mb-3">Stop</strong>
</li>
<li class="icon-box" onclick="text_font(this)">
<i class="fa-solid fa-street-view fa-fw"></i>
<strong class="mb-3">Street view</strong>
</li>
<li class="icon-box" onclick="text_font(this)">
<i class="fa-solid fa-strikethrough fa-fw"></i>
<strong class="mb-3">Strikethrough</strong>
</li>
<li class="icon-box" onclick="text_font(this)">
<i class="fa-solid fa-brands fa-stumbleupon fa-fw"></i>
<strong class="mb-3">Stumbleupon</strong>
</li>
<li class="icon-box" onclick="text_font(this)">
<i class="fa-solid fa-brands fa-stumbleupon-circle fa-fw"></i>
<strong class="mb-3">Stumbleupon circle</strong>
</li>
<li class="icon-box" onclick="text_font(this)">
<i class="fa-solid fa-subscript fa-fw"></i>
<strong class="mb-3">Subscript</strong>
</li>
<li class="icon-box" onclick="text_font(this)">
<i class="fa-solid fa-subway fa-fw"></i>
<strong class="mb-3">Subway</strong>
</li>
<li class="icon-box" onclick="text_font(this)">
<i class="fa-solid fa-suitcase fa-fw"></i>
<strong class="mb-3">Suitcase</strong>
</li>
<li class="icon-box" onclick="text_font(this)">
<i class="fa-solid fa-sun fa-fw"></i>
<strong class="mb-3">Sun o</strong>
</li>
<li class="icon-box" onclick="text_font(this)">
<i class="fa-solid fa-superscript fa-fw"></i>
<strong class="mb-3">Superscript</strong>
</li>
<li class="icon-box" onclick="text_font(this)">
<i class="fa-solid fa-table fa-fw"></i>
<strong class="mb-3">Table</strong>
</li>
<li class="icon-box" onclick="text_font(this)">
<i class="fa-solid fa-tablet fa-fw"></i>
<strong class="mb-3">Tablet</strong>
</li>
<li class="icon-box" onclick="text_font(this)">
<i class="fa-solid fa-tachometer fa-fw"></i>
<strong class="mb-3">Tachometer</strong>
</li>
<li class="icon-box" onclick="text_font(this)">
<i class="fa-solid fa-tag fa-fw"></i>
<strong class="mb-3">Tag</strong>
</li>
<li class="icon-box" onclick="text_font(this)">
<i class="fa-solid fa-tags fa-fw"></i>
<strong class="mb-3">Tags</strong>
</li>
<li class="icon-box" onclick="text_font(this)">
<i class="fa-solid fa-tasks fa-fw"></i>
<strong class="mb-3">Tasks</strong>
</li>
<li class="icon-box" onclick="text_font(this)">
<i class="fa-solid fa-taxi fa-fw"></i>
<strong class="mb-3">Taxi</strong>
</li>
<li class="icon-box" onclick="text_font(this)">
<i class="fa-solid fa-television fa-fw"></i>
<strong class="mb-3">Television</strong>
</li>
<li class="icon-box" onclick="text_font(this)">
<i class="fa-solid fa-brands fa-tencent-weibo fa-fw"></i>
<strong class="mb-3">Tencent weibo</strong>
</li>
<li class="icon-box" onclick="text_font(this)">
<i class="fa-solid fa-terminal fa-fw"></i>
<strong class="mb-3">Terminal</strong>
</li>
<li class="icon-box" onclick="text_font(this)">
<i class="fa-solid fa-text-height fa-fw"></i>
<strong class="mb-3">Text height</strong>
</li>
<li class="icon-box" onclick="text_font(this)">
<i class="fa-solid fa-text-width fa-fw"></i>
<strong class="mb-3">Text width</strong>
</li>
<li class="icon-box" onclick="text_font(this)">
<i class="fa-solid fa-th fa-fw"></i>
<strong class="mb-3">Th</strong>
</li>
<li class="icon-box" onclick="text_font(this)">
<i class="fa-solid fa-th-large fa-fw"></i>
<strong class="mb-3">Th large</strong>
</li>
<li class="icon-box" onclick="text_font(this)">
<i class="fa-solid fa-th-list fa-fw"></i>
<strong class="mb-3">Th list</strong>
</li>
<li class="icon-box" onclick="text_font(this)">
<i class="fa-solid fa-thumb-tack fa-fw"></i>
<strong class="mb-3">Thumb tack</strong>
</li>
<li class="icon-box" onclick="text_font(this)">
<i class="fa-solid fa-thumbs-down fa-fw"></i>
<strong class="mb-3">Thumbs down</strong>
</li>
<li class="icon-box" onclick="text_font(this)">
<i class="fa-solid fa-thumbs-down fa-fw"></i>
<strong class="mb-3">Thumbs o down</strong>
</li>
<li class="icon-box" onclick="text_font(this)">
<i class="fa-solid fa-thumbs-up fa-fw"></i>
<strong class="mb-3">Thumbs o up</strong>
</li>
<li class="icon-box" onclick="text_font(this)">
<i class="fa-solid fa-thumbs-up fa-fw"></i>
<strong class="mb-3">Thumbs up</strong>
</li>
<li class="icon-box" onclick="text_font(this)">
<i class="fa-solid fa-ticket fa-fw"></i>
<strong class="mb-3">Ticket</strong>
</li>
<li class="icon-box" onclick="text_font(this)">
<i class="fa-solid fa-times fa-fw"></i>
<strong class="mb-3">Times</strong>
</li>
<li class="icon-box" onclick="text_font(this)">
<i class="fa-solid fa-times-circle fa-fw"></i>
<strong class="mb-3">Times circle</strong>
</li>
<li class="icon-box" onclick="text_font(this)">
<i class="fa-solid fa-times-circle fa-fw"></i>
<strong class="mb-3">Times circle o</strong>
</li>
<li class="icon-box" onclick="text_font(this)">
<i class="fa-solid fa-tint fa-fw"></i>
<strong class="mb-3">Tint</strong>
</li>
<li class="icon-box" onclick="text_font(this)">
<i class="fa-solid fa-toggle-off fa-fw"></i>
<strong class="mb-3">Toggle off</strong>
</li>
<li class="icon-box" onclick="text_font(this)">
<i class="fa-solid fa-toggle-on fa-fw"></i>
<strong class="mb-3">Toggle on</strong>
</li>
<li class="icon-box" onclick="text_font(this)">
<i class="fa-solid fa-trademark fa-fw"></i>
<strong class="mb-3">Trademark</strong>
</li>
<li class="icon-box" onclick="text_font(this)">
<i class="fa-solid fa-train fa-fw"></i>
<strong class="mb-3">Train</strong>
</li>
<li class="icon-box" onclick="text_font(this)">
<i class="fa-solid fa-transgender fa-fw"></i>
<strong class="mb-3">Transgender</strong>
</li>
<li class="icon-box" onclick="text_font(this)">
<i class="fa-solid fa-transgender-alt fa-fw"></i>
<strong class="mb-3">Transgender alt</strong>
</li>
<li class="icon-box" onclick="text_font(this)">
<i class="fa-solid fa-trash fa-fw"></i>
<strong class="mb-3">Trash</strong>
</li>
<li class="icon-box" onclick="text_font(this)">
<i class="fa-solid fa-trash fa-fw"></i>
<strong class="mb-3">Trash o</strong>
</li>
<li class="icon-box" onclick="text_font(this)">
<i class="fa-solid fa-tree fa-fw"></i>
<strong class="mb-3">Tree</strong>
</li>
<li class="icon-box" onclick="text_font(this)">
<i class="fa-solid fa-brands fa-trello fa-fw"></i>
<strong class="mb-3">Trello</strong>
</li>
<li class="icon-box" onclick="text_font(this)">
<i class="fa-solid fa-trophy fa-fw"></i>
<strong class="mb-3">Trophy</strong>
</li>
<li class="icon-box" onclick="text_font(this)">
<i class="fa-solid fa-truck fa-fw"></i>
<strong class="mb-3">Truck</strong>
</li>
<li class="icon-box" onclick="text_font(this)">
<i class="fa-solid fa-try fa-fw"></i>
<strong class="mb-3">Try</strong>
</li>
<li class="icon-box" onclick="text_font(this)">
<i class="fa-solid fa-tty fa-fw"></i>
<strong class="mb-3">Tty</strong>
</li>
<li class="icon-box" onclick="text_font(this)">
<i class="fa-solid fa-brands fa-tumblr fa-fw"></i>
<strong class="mb-3">Tumblr</strong>
</li>
<li class="icon-box" onclick="text_font(this)">
<i class="fa-solid fa-brands fa-tumblr-square fa-fw"></i>
<strong class="mb-3">Tumblr square</strong>
</li>
<li class="icon-box" onclick="text_font(this)">
<i class="fa-solid fa-twitch fa-fw"></i>
<strong class="mb-3">Twitch</strong>
</li>
<li class="icon-box" onclick="text_font(this)">
<i class="fa-solid fa-twitter fa-fw"></i>
<strong class="mb-3">Twitter</strong>
</li>
<li class="icon-box" onclick="text_font(this)">
<i class="fa-solid fa-twitter-square fa-fw"></i>
<strong class="mb-3">Twitter square</strong>
</li>
<li class="icon-box" onclick="text_font(this)">
<i class="fa-solid fa-umbrella fa-fw"></i>
<strong class="mb-3">Umbrella</strong>
</li>
<li class="icon-box" onclick="text_font(this)">
<i class="fa-solid fa-underline fa-fw"></i>
<strong class="mb-3">Underline</strong>
</li>
<li class="icon-box" onclick="text_font(this)">
<i class="fa-solid fa-undo fa-fw"></i>
<strong class="mb-3">Undo</strong>
</li>
<li class="icon-box" onclick="text_font(this)">
<i class="fa-solid fa-university fa-fw"></i>
<strong class="mb-3">University</strong>
</li>
<li class="icon-box" onclick="text_font(this)">
<i class="fa-solid fa-unlock fa-fw"></i>
<strong class="mb-3">Unlock</strong>
</li>
<li class="icon-box" onclick="text_font(this)">
<i class="fa-solid fa-unlock-alt fa-fw"></i>
<strong class="mb-3">Unlock alt</strong>
</li>
<li class="icon-box" onclick="text_font(this)">
<i class="fa-solid fa-upload fa-fw"></i>
<strong class="mb-3">Upload</strong>
</li>
<li class="icon-box" onclick="text_font(this)">
<i class="fa-solid fa-usd fa-fw"></i>
<strong class="mb-3">Usd</strong>
</li>
<li class="icon-box" onclick="text_font(this)">
<i class="fa-solid fa-user fa-fw"></i>
<strong class="mb-3">User</strong>
</li>
<li class="icon-box" onclick="text_font(this)">
<i class="fa-solid fa-user-md fa-fw"></i>
<strong class="mb-3">User md</strong>
</li>
<li class="icon-box" onclick="text_font(this)">
<i class="fa-solid fa-user-plus fa-fw"></i>
<strong class="mb-3">User plus</strong>
</li>
<li class="icon-box" onclick="text_font(this)">
<i class="fa-solid fa-user-secret fa-fw"></i>
<strong class="mb-3">User secret</strong>
</li>
<li class="icon-box" onclick="text_font(this)">
<i class="fa-solid fa-user-times fa-fw"></i>
<strong class="mb-3">User times</strong>
</li>
<li class="icon-box" onclick="text_font(this)">
<i class="fa-solid fa-users fa-fw"></i>
<strong class="mb-3">Users</strong>
</li>
<li class="icon-box" onclick="text_font(this)">
<i class="fa-solid fa-venus fa-fw"></i>
<strong class="mb-3">Venus</strong>
</li>
<li class="icon-box" onclick="text_font(this)">
<i class="fa-solid fa-venus-double fa-fw"></i>
<strong class="mb-3">Venus double</strong>
</li>
<li class="icon-box" onclick="text_font(this)">
<i class="fa-solid fa-venus-mars fa-fw"></i>
<strong class="mb-3">Venus mars</strong>
</li>
<li class="icon-box" onclick="text_font(this)">
<i class="fa-solid fa-brands fa-viacoin fa-fw"></i>
<strong class="mb-3">Viacoin</strong>
</li>
<li class="icon-box" onclick="text_font(this)">
<i class="fa-solid fa-video-camera fa-fw"></i>
<strong class="mb-3">Video camera</strong>
</li>
<li class="icon-box" onclick="text_font(this)">
<i class="fa-solid fa-brands fa-vimeo fa-fw"></i>
<strong class="mb-3">Vimeo</strong>
</li>
<li class="icon-box" onclick="text_font(this)">
<i class="fa-solid fa-brands fa-vimeo-square fa-fw"></i>
<strong class="mb-3">Vimeo square</strong>
</li>
<li class="icon-box" onclick="text_font(this)">
<i class="fa-solid fa-brands fa-vine fa-fw"></i>
<strong class="mb-3">Vine</strong>
</li>
<li class="icon-box" onclick="text_font(this)">
<i class="fa-solid fa-brands fa-vk fa-fw"></i>
<strong class="mb-3">Vk</strong>
</li>
<li class="icon-box" onclick="text_font(this)">
<i class="fa-solid fa-volume-down fa-fw"></i>
<strong class="mb-3">Volume down</strong>
</li>
<li class="icon-box" onclick="text_font(this)">
<i class="fa-solid fa-volume-off fa-fw"></i>
<strong class="mb-3">Volume off</strong>
</li>
<li class="icon-box" onclick="text_font(this)">
<i class="fa-solid fa-volume-up fa-fw"></i>
<strong class="mb-3">Volume up</strong>
</li>
<li class="icon-box" onclick="text_font(this)">
<i class="fa-solid fa-brands fa-weibo fa-fw"></i>
<strong class="mb-3">Weibo</strong>
</li>
<li class="icon-box" onclick="text_font(this)">
<i class="fa-solid fa-brands fa-weixin fa-fw"></i>
<strong class="mb-3">Weixin</strong>
</li>
<li class="icon-box" onclick="text_font(this)">
<i class="fa-solid fa-brands fa-whatsapp fa-fw"></i>
<strong class="mb-3">Whatsapp</strong>
</li>
<li class="icon-box" onclick="text_font(this)">
<i class="fa-solid fa-wheelchair fa-fw"></i>
<strong class="mb-3">Wheelchair</strong>
</li>
<li class="icon-box" onclick="text_font(this)">
<i class="fa-solid fa-wifi fa-fw"></i>
<strong class="mb-3">Wifi</strong>
</li>
<li class="icon-box" onclick="text_font(this)">
<i class="fa-solid fa-brands fa-wikipedia-w fa-fw"></i>
<strong class="mb-3">Wikipedia w</strong>
</li>
<li class="icon-box" onclick="text_font(this)">
<i class="fa-solid fa-brands fa-windows fa-fw"></i>
<strong class="mb-3">Windows</strong>
</li>
<li class="icon-box" onclick="text_font(this)">
<i class="fa-solid fa-brands fa-wordpress fa-fw"></i>
<strong class="mb-3">Wordpress</strong>
</li>
<li class="icon-box" onclick="text_font(this)">
<i class="fa-solid fa-wrench fa-fw"></i>
<strong class="mb-3">Wrench</strong>
</li>
<li class="icon-box" onclick="text_font(this)">
<i class="fa-solid fa-brands fa-xing fa-fw"></i>
<strong class="mb-3">Xing</strong>
</li>
<li class="icon-box" onclick="text_font(this)">
<i class="fa-solid fa-brands fa-xing-square fa-fw"></i>
<strong class="mb-3">Xing square</strong>
</li>
<li class="icon-box" onclick="text_font(this)">
<i class="fa-solid fa-brands fa-y-combinator fa-fw"></i>
<strong class="mb-3">Y combinator</strong>
</li>
<li class="icon-box" onclick="text_font(this)">
<i class="fa-solid fa-brands fa-yahoo fa-fw"></i>
<strong class="mb-3">Yahoo</strong>
</li>
<li class="icon-box" onclick="text_font(this)">
<i class="fa-solid fa-brands fa-yelp fa-fw"></i>
<strong class="mb-3">Yelp</strong>
</li>
<li class="icon-box" onclick="text_font(this)">
<i class="fa-solid fa-brands fa-youtube fa-fw"></i>
<strong class="mb-3">Youtube</strong>
</li>
<li class="icon-box" onclick="text_font(this)">
<i class="fa-solid fa-brands fa-youtube fa-fw"></i>
<strong class="mb-3">Youtube play</strong>
</li>
<li class="icon-box" onclick="text_font(this)">
<i class="fa-solid fa-brands fa-youtube-square fa-fw"></i>
<strong class="mb-3">Youtube square</strong>
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
</main>
<!-- Body main section ends -->
<!-- tap on top -->
<div class="go-top">
<span class="progress-value">
<i class="ti ti-arrow-up"></i>
</span>
</div>
<!-- Footer Section starts-->
<footer>
<div class="container-fluid">
<div class="row">
<div class="col-md-9 col-12">
<p class="footer-text f-w-600 mb-0">Copyright © 2025 ki-admin. All rights reserved 💖
V1.0.0</p>
</div>
<div class="col-md-3">
<div class="footer-text text-end">
<a class="f-w-500 text-primary" href="mailto:teqlathemes@gmail.com"> Need Help <i
class="ti ti-help"></i></a>
</div>
</div>
</div>
</div>
</footer>
<!-- Footer Section ends-->
</div>
</div>
</div>
<!--customizer-->
<div id="customizer"></div>
<!-- latest jquery-->
<script src="../assets/js/jquery-3.6.3.min.js"></script>
<!-- Simple bar js-->
<script src="../assets/vendor/simplebar/simplebar.js"></script>
<!-- phosphor js -->
<script src="../assets/vendor/phosphor/phosphor.js"></script>
<!-- Bootstrap js-->
<script src="../assets/vendor/bootstrap/bootstrap.bundle.min.js"></script>
<!-- toastify js -->
<script src="../assets/vendor/notifications/toastify-js.js"></script>
<!-- font-awesome js-->
<script src="../assets/js/font_awesome.js"></script>
<!-- App js-->
<script src="../assets/js/script.js"></script>
<!-- Customizer js-->
<script src="../assets/js/customizer.js"></script>
</body>
</html>