agdar/templates/pages/ui-icon-simple-line-icons.html
2025-11-02 14:35:35 +03:00

235 lines
24 KiB
HTML

{% extends 'base.html' %}
{% load static %}
{% block title %}Simple Line Icons{% endblock %}
{% block css %}
<link href="{% static 'plugins/simple-line-icons/css/simple-line-icons.css' %}" rel="stylesheet" />
{% endblock %}
{% block js %}
<script src="{% static 'plugins/@highlightjs/cdn-assets/highlight.min.js' %}"></script>
<script src="{% static 'js/demo/render.highlight.js' %}"></script>
{% endblock %}
{% block content %}
<!-- BEGIN breadcrumb -->
<ol class="breadcrumb float-xl-end">
<li class="breadcrumb-item"><a href="javascript:;">Home</a></li>
<li class="breadcrumb-item"><a href="javascript:;">UI Elements</a></li>
<li class="breadcrumb-item active">Simple Line Icons</li>
</ol>
<!-- END breadcrumb -->
<!-- BEGIN page-header -->
<h1 class="page-header">Simple Line Icons <small>162 beautifully crafted webfont icons</small></h1>
<!-- END page-header -->
<!-- BEGIN panel -->
<div class="panel panel-inverse">
<!-- BEGIN panel-heading -->
<div class="panel-heading">
<h4 class="panel-title">Installation</h4>
<div class="panel-heading-btn">
<a href="javascript:;" class="btn btn-xs btn-icon btn-default" data-toggle="panel-expand"><i class="fa fa-expand"></i></a>
<a href="javascript:;" class="btn btn-xs btn-icon btn-success" data-toggle="panel-reload"><i class="fa fa-redo"></i></a>
<a href="javascript:;" class="btn btn-xs btn-icon btn-warning" data-toggle="panel-collapse"><i class="fa fa-minus"></i></a>
<a href="javascript:;" class="btn btn-xs btn-icon btn-danger" data-toggle="panel-remove"><i class="fa fa-times"></i></a>
</div>
</div>
<!-- END panel-heading -->
<!-- BEGIN panel-body -->
<div class="panel-body">
<!-- BEGIN row -->
<div class="row pt-2">
<!-- BEGIN col-2 -->
<div class="col-xl-3 col-lg-4 col-md-6 col-12">
<div class="mb-3 d-flex align-items-center"><i class="icon-user h3 d-block"></i><div class="ms-3">icon-user</div></div>
<div class="mb-3 d-flex align-items-center"><i class="icon-user-female h3 d-block"></i><div class="ms-3">icon-user-female</div></div>
<div class="mb-3 d-flex align-items-center"><i class="icon-user h3 d-block"></i><div class="ms-3">icon-user</div></div>
<div class="mb-3 d-flex align-items-center"><i class="icon-user-follow h3 d-block"></i><div class="ms-3">icon-user-follow</div></div>
<div class="mb-3 d-flex align-items-center"><i class="icon-user-following h3 d-block"></i><div class="ms-3">icon-user-following</div></div>
<div class="mb-3 d-flex align-items-center"><i class="icon-user-unfollow h3 d-block"></i><div class="ms-3">icon-user-unfollow</div></div>
<div class="mb-3 d-flex align-items-center"><i class="icon-trophy h3 d-block"></i><div class="ms-3">icon-trophy</div></div>
<div class="mb-3 d-flex align-items-center"><i class="icon-speedometer h3 d-block"></i><div class="ms-3">icon-speedometer</div></div>
<div class="mb-3 d-flex align-items-center"><i class="icon-social-youtube h3 d-block"></i><div class="ms-3">icon-social-youtube</div></div>
<div class="mb-3 d-flex align-items-center"><i class="icon-social-twitter h3 d-block"></i><div class="ms-3">icon-social-twitter</div></div>
<div class="mb-3 d-flex align-items-center"><i class="icon-social-tumblr h3 d-block"></i><div class="ms-3">icon-social-tumblr</div></div>
<div class="mb-3 d-flex align-items-center"><i class="icon-social-facebook h3 d-block"></i><div class="ms-3">icon-social-facebook</div></div>
<div class="mb-3 d-flex align-items-center"><i class="icon-social-dropbox h3 d-block"></i><div class="ms-3">icon-social-dropbox</div></div>
<div class="mb-3 d-flex align-items-center"><i class="icon-social-dribbble h3 d-block"></i><div class="ms-3">icon-social-dribbble</div></div>
<div class="mb-3 d-flex align-items-center"><i class="icon-shield h3 d-block"></i><div class="ms-3">icon-shield</div></div>
<div class="mb-3 d-flex align-items-center"><i class="icon-screen-tablet h3 d-block"></i><div class="ms-3">icon-screen-tablet</div></div>
<div class="mb-3 d-flex align-items-center"><i class="icon-screen-smartphone h3 d-block"></i><div class="ms-3">icon-screen-smartphone</div></div>
<div class="mb-3 d-flex align-items-center"><i class="icon-screen-desktop h3 d-block"></i><div class="ms-3">icon-screen-desktop</div></div>
<div class="mb-3 d-flex align-items-center"><i class="icon-plane h3 d-block"></i><div class="ms-3">icon-plane</div></div>
<div class="mb-3 d-flex align-items-center"><i class="icon-notebook h3 d-block"></i><div class="ms-3">icon-notebook</div></div>
<div class="mb-3 d-flex align-items-center"><i class="icon-mustache h3 d-block"></i><div class="ms-3">icon-mustache</div></div>
<div class="mb-3 d-flex align-items-center"><i class="icon-mouse h3 d-block"></i><div class="ms-3">icon-mouse</div></div>
<div class="mb-3 d-flex align-items-center"><i class="icon-magnet h3 d-block"></i><div class="ms-3">icon-magnet</div></div>
<div class="mb-3 d-flex align-items-center"><i class="icon-magic-wand h3 d-block"></i><div class="ms-3">icon-magic-wand</div></div>
<div class="mb-3 d-flex align-items-center"><i class="icon-hourglass h3 d-block"></i><div class="ms-3">icon-hourglass</div></div>
<div class="mb-3 d-flex align-items-center"><i class="icon-graduation h3 d-block"></i><div class="ms-3">icon-graduation</div></div>
<div class="mb-3 d-flex align-items-center"><i class="icon-ghost h3 d-block"></i><div class="ms-3">icon-ghost</div></div>
<div class="mb-3 d-flex align-items-center"><i class="icon-music-tone-alt h3 d-block"></i><div class="ms-3">icon-music-tone-alt</div></div>
<div class="mb-3 d-flex align-items-center"><i class="icon-note h3 d-block"></i><div class="ms-3">icon-note</div></div>
<div class="mb-3 d-flex align-items-center"><i class="icon-pencil h3 d-block"></i><div class="ms-3">icon-pencil</div></div>
<div class="mb-3 d-flex align-items-center"><i class="icon-pie-chart h3 d-block"></i><div class="ms-3">icon-pie-chart</div></div>
<div class="mb-3 d-flex align-items-center"><i class="icon-question h3 d-block"></i><div class="ms-3">icon-question</div></div>
<div class="mb-3 d-flex align-items-center"><i class="icon-rocket h3 d-block"></i><div class="ms-3">icon-rocket</div></div>
<div class="mb-3 d-flex align-items-center"><i class="icon-share h3 d-block"></i><div class="ms-3">icon-share</div></div>
<div class="mb-3 d-flex align-items-center"><i class="icon-share-alt h3 d-block"></i><div class="ms-3">icon-share-alt</div></div>
<div class="mb-3 d-flex align-items-center"><i class="icon-shuffle h3 d-block"></i><div class="ms-3">icon-shuffle</div></div>
<div class="mb-3 d-flex align-items-center"><i class="icon-size-actual h3 d-block"></i><div class="ms-3">icon-size-actual</div></div>
<div class="mb-3 d-flex align-items-center"><i class="icon-size-fullscreen h3 d-block"></i><div class="ms-3">icon-size-fullscreen</div></div>
<div class="mb-3 d-flex align-items-center"><i class="icon-support h3 d-block"></i><div class="ms-3">icon-support</div></div>
<div class="mb-3 d-flex align-items-center"><i class="icon-tag h3 d-block"></i><div class="ms-3">icon-tag</div></div>
<div class="mb-3 d-flex align-items-center"><i class="icon-trash h3 d-block"></i><div class="ms-3">icon-trash</div></div>
</div>
<!-- END col-2 -->
<!-- BEGIN col-2 -->
<div class="col-xl-3 col-lg-4 col-md-6 col-12">
<div class="mb-3 d-flex align-items-center"><i class="icon-game-controller h3 d-block"></i><div class="ms-3">icon-game-controller</div></div>
<div class="mb-3 d-flex align-items-center"><i class="icon-fire h3 d-block"></i><div class="ms-3">icon-fire</div></div>
<div class="mb-3 d-flex align-items-center"><i class="icon-eyeglass h3 d-block"></i><div class="ms-3">icon-eyeglass</div></div>
<div class="mb-3 d-flex align-items-center"><i class="icon-envelope-open h3 d-block"></i><div class="ms-3">icon-envelope-open</div></div>
<div class="mb-3 d-flex align-items-center"><i class="icon-envelope-letter h3 d-block"></i><div class="ms-3">icon-envelope-letter</div></div>
<div class="mb-3 d-flex align-items-center"><i class="icon-energy h3 d-block"></i><div class="ms-3">icon-energy</div></div>
<div class="mb-3 d-flex align-items-center"><i class="icon-emotsmile h3 d-block"></i><div class="ms-3">icon-emotsmile</div></div>
<div class="mb-3 d-flex align-items-center"><i class="icon-disc h3 d-block"></i><div class="ms-3">icon-disc</div></div>
<div class="mb-3 d-flex align-items-center"><i class="icon-cursor-move h3 d-block"></i><div class="ms-3">icon-cursor-move</div></div>
<div class="mb-3 d-flex align-items-center"><i class="icon-crop h3 d-block"></i><div class="ms-3">icon-crop</div></div>
<div class="mb-3 d-flex align-items-center"><i class="icon-credit-card h3 d-block"></i><div class="ms-3">icon-credit-card</div></div>
<div class="mb-3 d-flex align-items-center"><i class="icon-chemistry h3 d-block"></i><div class="ms-3">icon-chemistry</div></div>
<div class="mb-3 d-flex align-items-center"><i class="icon-bell h3 d-block"></i><div class="ms-3">icon-bell</div></div>
<div class="mb-3 d-flex align-items-center"><i class="icon-badge h3 d-block"></i><div class="ms-3">icon-badge</div></div>
<div class="mb-3 d-flex align-items-center"><i class="icon-anchor h3 d-block"></i><div class="ms-3">icon-anchor</div></div>
<div class="mb-3 d-flex align-items-center"><i class="icon-action-redo h3 d-block"></i><div class="ms-3">icon-action-redo</div></div>
<div class="mb-3 d-flex align-items-center"><i class="icon-action-undo h3 d-block"></i><div class="ms-3">icon-action-undo</div></div>
<div class="mb-3 d-flex align-items-center"><i class="icon-bag h3 d-block"></i><div class="ms-3">icon-bag</div></div>
<div class="mb-3 d-flex align-items-center"><i class="icon-basket h3 d-block"></i><div class="ms-3">icon-basket</div></div>
<div class="mb-3 d-flex align-items-center"><i class="icon-basket-loaded h3 d-block"></i><div class="ms-3">icon-basket-loaded</div></div>
<div class="mb-3 d-flex align-items-center"><i class="icon-book-open h3 d-block"></i><div class="ms-3">icon-book-open</div></div>
<div class="mb-3 d-flex align-items-center"><i class="icon-briefcase h3 d-block"></i><div class="ms-3">icon-briefcase</div></div>
<div class="mb-3 d-flex align-items-center"><i class="icon-bubbles h3 d-block"></i><div class="ms-3">icon-bubbles</div></div>
<div class="mb-3 d-flex align-items-center"><i class="icon-calculator h3 d-block"></i><div class="ms-3">icon-calculator</div></div>
<div class="mb-3 d-flex align-items-center"><i class="icon-call-end h3 d-block"></i><div class="ms-3">icon-call-end</div></div>
<div class="mb-3 d-flex align-items-center"><i class="icon-call-in h3 d-block"></i><div class="ms-3">icon-call-in</div></div>
<div class="mb-3 d-flex align-items-center"><i class="icon-call-out h3 d-block"></i><div class="ms-3">icon-call-out</div></div>
<div class="mb-3 d-flex align-items-center"><i class="icon-umbrella h3 d-block"></i><div class="ms-3">icon-umbrella</div></div>
<div class="mb-3 d-flex align-items-center"><i class="icon-wrench h3 d-block"></i><div class="ms-3">icon-wrench</div></div>
<div class="mb-3 d-flex align-items-center"><i class="icon-ban h3 d-block"></i><div class="ms-3">icon-ban</div></div>
<div class="mb-3 d-flex align-items-center"><i class="icon-bubble h3 d-block"></i><div class="ms-3">icon-bubble</div></div>
<div class="mb-3 d-flex align-items-center"><i class="icon-camrecorder h3 d-block"></i><div class="ms-3">icon-camrecorder</div></div>
<div class="mb-3 d-flex align-items-center"><i class="icon-camera h3 d-block"></i><div class="ms-3">icon-camera</div></div>
<div class="mb-3 d-flex align-items-center"><i class="icon-check h3 d-block"></i><div class="ms-3">icon-check</div></div>
<div class="mb-3 d-flex align-items-center"><i class="icon-clock h3 d-block"></i><div class="ms-3">icon-clock</div></div>
<div class="mb-3 d-flex align-items-center"><i class="icon-close h3 d-block"></i><div class="ms-3">icon-close</div></div>
<div class="mb-3 d-flex align-items-center"><i class="icon-cloud-download h3 d-block"></i><div class="ms-3">icon-cloud-download</div></div>
<div class="mb-3 d-flex align-items-center"><i class="icon-cloud-upload h3 d-block"></i><div class="ms-3">icon-cloud-upload</div></div>
<div class="mb-3 d-flex align-items-center"><i class="icon-doc h3 d-block"></i><div class="ms-3">icon-doc</div></div>
<div class="mb-3 d-flex align-items-center"><i class="icon-envelope h3 d-block"></i><div class="ms-3">icon-envelope</div></div>
<div class="mb-3 d-flex align-items-center"><i class="icon-eye h3 d-block"></i><div class="ms-3">icon-eye</div></div>
</div>
<!-- END col-2 -->
<!-- BEGIN col-2 -->
<div class="col-xl-3 col-lg-4 col-md-6 col-12">
<div class="mb-3 d-flex align-items-center"><i class="icon-compass h3 d-block"></i><div class="ms-3">icon-compass</div></div>
<div class="mb-3 d-flex align-items-center"><i class="icon-cup h3 d-block"></i><div class="ms-3">icon-cup</div></div>
<div class="mb-3 d-flex align-items-center"><i class="icon-diamond h3 d-block"></i><div class="ms-3">icon-diamond</div></div>
<div class="mb-3 d-flex align-items-center"><i class="icon-direction h3 d-block"></i><div class="ms-3">icon-direction</div></div>
<div class="mb-3 d-flex align-items-center"><i class="icon-directions h3 d-block"></i><div class="ms-3">icon-directions</div></div>
<div class="mb-3 d-flex align-items-center"><i class="icon-docs h3 d-block"></i><div class="ms-3">icon-docs</div></div>
<div class="mb-3 d-flex align-items-center"><i class="icon-drawer h3 d-block"></i><div class="ms-3">icon-drawer</div></div>
<div class="mb-3 d-flex align-items-center"><i class="icon-drop h3 d-block"></i><div class="ms-3">icon-drop</div></div>
<div class="mb-3 d-flex align-items-center"><i class="icon-earphones h3 d-block"></i><div class="ms-3">icon-earphones</div></div>
<div class="mb-3 d-flex align-items-center"><i class="icon-earphones-alt h3 d-block"></i><div class="ms-3">icon-earphones-alt</div></div>
<div class="mb-3 d-flex align-items-center"><i class="icon-feed h3 d-block"></i><div class="ms-3">icon-feed</div></div>
<div class="mb-3 d-flex align-items-center"><i class="icon-film h3 d-block"></i><div class="ms-3">icon-film</div></div>
<div class="mb-3 d-flex align-items-center"><i class="icon-folder-alt h3 d-block"></i><div class="ms-3">icon-folder-alt</div></div>
<div class="mb-3 d-flex align-items-center"><i class="icon-frame h3 d-block"></i><div class="ms-3">icon-frame</div></div>
<div class="mb-3 d-flex align-items-center"><i class="icon-globe h3 d-block"></i><div class="ms-3">icon-globe</div></div>
<div class="mb-3 d-flex align-items-center"><i class="icon-globe-alt h3 d-block"></i><div class="ms-3">icon-globe-alt</div></div>
<div class="mb-3 d-flex align-items-center"><i class="icon-handbag h3 d-block"></i><div class="ms-3">icon-handbag</div></div>
<div class="mb-3 d-flex align-items-center"><i class="icon-layers h3 d-block"></i><div class="ms-3">icon-layers</div></div>
<div class="mb-3 d-flex align-items-center"><i class="icon-map h3 d-block"></i><div class="ms-3">icon-map</div></div>
<div class="mb-3 d-flex align-items-center"><i class="icon-picture h3 d-block"></i><div class="ms-3">icon-picture</div></div>
<div class="mb-3 d-flex align-items-center"><i class="icon-pin h3 d-block"></i><div class="ms-3">icon-pin</div></div>
<div class="mb-3 d-flex align-items-center"><i class="icon-playlist h3 d-block"></i><div class="ms-3">icon-playlist</div></div>
<div class="mb-3 d-flex align-items-center"><i class="icon-present h3 d-block"></i><div class="ms-3">icon-present</div></div>
<div class="mb-3 d-flex align-items-center"><i class="icon-printer h3 d-block"></i><div class="ms-3">icon-printer</div></div>
<div class="mb-3 d-flex align-items-center"><i class="icon-puzzle h3 d-block"></i><div class="ms-3">icon-puzzle</div></div>
<div class="mb-3 d-flex align-items-center"><i class="icon-speech h3 d-block"></i><div class="ms-3">icon-speech</div></div>
<div class="mb-3 d-flex align-items-center"><i class="icon-vector h3 d-block"></i><div class="ms-3">icon-vector</div></div>
<div class="mb-3 d-flex align-items-center"><i class="icon-flag h3 d-block"></i><div class="ms-3">icon-flag</div></div>
<div class="mb-3 d-flex align-items-center"><i class="icon-folder h3 d-block"></i><div class="ms-3">icon-folder</div></div>
<div class="mb-3 d-flex align-items-center"><i class="icon-heart h3 d-block"></i><div class="ms-3">icon-heart</div></div>
<div class="mb-3 d-flex align-items-center"><i class="icon-info h3 d-block"></i><div class="ms-3">icon-info</div></div>
<div class="mb-3 d-flex align-items-center"><i class="icon-key h3 d-block"></i><div class="ms-3">icon-key</div></div>
<div class="mb-3 d-flex align-items-center"><i class="icon-link h3 d-block"></i><div class="ms-3">icon-link</div></div>
<div class="mb-3 d-flex align-items-center"><i class="icon-lock h3 d-block"></i><div class="ms-3">icon-lock</div></div>
<div class="mb-3 d-flex align-items-center"><i class="icon-lock-open h3 d-block"></i><div class="ms-3">icon-lock-open</div></div>
<div class="mb-3 d-flex align-items-center"><i class="icon-magnifier h3 d-block"></i><div class="ms-3">icon-magnifier</div></div>
<div class="mb-3 d-flex align-items-center"><i class="icon-magnifier-add h3 d-block"></i><div class="ms-3">icon-magnifier-add</div></div>
<div class="mb-3 d-flex align-items-center"><i class="icon-magnifier-remove h3 d-block"></i><div class="ms-3">icon-magnifier-remove</div></div>
<div class="mb-3 d-flex align-items-center"><i class="icon-paper-clip h3 d-block"></i><div class="ms-3">icon-paper-clip</div></div>
<div class="mb-3 d-flex align-items-center"><i class="icon-paper-plane h3 d-block"></i><div class="ms-3">icon-paper-plane</div></div>
</div>
<!-- END col-2 -->
<!-- BEGIN col-2 -->
<div class="col-xl-3 col-lg-4 col-md-6 col-12">
<div class="mb-3 d-flex align-items-center"><i class="icon-wallet h3 d-block"></i><div class="ms-3">icon-wallet</div></div>
<div class="mb-3 d-flex align-items-center"><i class="icon-arrow-down h3 d-block"></i><div class="ms-3">icon-arrow-down</div></div>
<div class="mb-3 d-flex align-items-center"><i class="icon-arrow-left h3 d-block"></i><div class="ms-3">icon-arrow-left</div></div>
<div class="mb-3 d-flex align-items-center"><i class="icon-arrow-right h3 d-block"></i><div class="ms-3">icon-arrow-right</div></div>
<div class="mb-3 d-flex align-items-center"><i class="icon-arrow-up h3 d-block"></i><div class="ms-3">icon-arrow-up</div></div>
<div class="mb-3 d-flex align-items-center"><i class="icon-chart h3 d-block"></i><div class="ms-3">icon-chart</div></div>
<div class="mb-3 d-flex align-items-center"><i class="icon-bulb h3 d-block"></i><div class="ms-3">icon-bulb</div></div>
<div class="mb-3 d-flex align-items-center"><i class="icon-calendar h3 d-block"></i><div class="ms-3">icon-calendar</div></div>
<div class="mb-3 d-flex align-items-center"><i class="icon-control-end h3 d-block"></i><div class="ms-3">icon-control-end</div></div>
<div class="mb-3 d-flex align-items-center"><i class="icon-control-forward h3 d-block"></i><div class="ms-3">icon-control-forward</div></div>
<div class="mb-3 d-flex align-items-center"><i class="icon-control-pause h3 d-block"></i><div class="ms-3">icon-control-pause</div></div>
<div class="mb-3 d-flex align-items-center"><i class="icon-control-play h3 d-block"></i><div class="ms-3">icon-control-play</div></div>
<div class="mb-3 d-flex align-items-center"><i class="icon-control-rewind h3 d-block"></i><div class="ms-3">icon-control-rewind</div></div>
<div class="mb-3 d-flex align-items-center"><i class="icon-control-start h3 d-block"></i><div class="ms-3">icon-control-start</div></div>
<div class="mb-3 d-flex align-items-center"><i class="icon-cursor h3 d-block"></i><div class="ms-3">icon-cursor</div></div>
<div class="mb-3 d-flex align-items-center"><i class="icon-dislike h3 d-block"></i><div class="ms-3">icon-dislike</div></div>
<div class="mb-3 d-flex align-items-center"><i class="icon-equalizer h3 d-block"></i><div class="ms-3">icon-equalizer</div></div>
<div class="mb-3 d-flex align-items-center"><i class="icon-graph h3 d-block"></i><div class="ms-3">icon-graph</div></div>
<div class="mb-3 d-flex align-items-center"><i class="icon-grid h3 d-block"></i><div class="ms-3">icon-grid</div></div>
<div class="mb-3 d-flex align-items-center"><i class="icon-home h3 d-block"></i><div class="ms-3">icon-home</div></div>
<div class="mb-3 d-flex align-items-center"><i class="icon-like h3 d-block"></i><div class="ms-3">icon-like</div></div>
<div class="mb-3 d-flex align-items-center"><i class="icon-list h3 d-block"></i><div class="ms-3">icon-list</div></div>
<div class="mb-3 d-flex align-items-center"><i class="icon-login h3 d-block"></i><div class="ms-3">icon-login</div></div>
<div class="mb-3 d-flex align-items-center"><i class="icon-logout h3 d-block"></i><div class="ms-3">icon-logout</div></div>
<div class="mb-3 d-flex align-items-center"><i class="icon-loop h3 d-block"></i><div class="ms-3">icon-loop</div></div>
<div class="mb-3 d-flex align-items-center"><i class="icon-microphone h3 d-block"></i><div class="ms-3">icon-microphone</div></div>
<div class="mb-3 d-flex align-items-center"><i class="icon-music-tone h3 d-block"></i><div class="ms-3">icon-music-tone</div></div>
<div class="mb-3 d-flex align-items-center"><i class="icon-plus h3 d-block"></i><div class="ms-3">icon-plus</div></div>
<div class="mb-3 d-flex align-items-center"><i class="icon-location-pin h3 d-block"></i><div class="ms-3">icon-location-pin</div></div>
<div class="mb-3 d-flex align-items-center"><i class="icon-power h3 d-block"></i><div class="ms-3">icon-power</div></div>
<div class="mb-3 d-flex align-items-center"><i class="icon-refresh h3 d-block"></i><div class="ms-3">icon-refresh</div></div>
<div class="mb-3 d-flex align-items-center"><i class="icon-reload h3 d-block"></i><div class="ms-3">icon-reload</div></div>
<div class="mb-3 d-flex align-items-center"><i class="icon-settings h3 d-block"></i><div class="ms-3">icon-settings</div></div>
<div class="mb-3 d-flex align-items-center"><i class="icon-star h3 d-block"></i><div class="ms-3">icon-star</div></div>
<div class="mb-3 d-flex align-items-center"><i class="icon-symbol-female h3 d-block"></i><div class="ms-3">icon-symbol-female</div></div>
<div class="mb-3 d-flex align-items-center"><i class="icon-symbol-male h3 d-block"></i><div class="ms-3">icon-symbol-male</div></div>
<div class="mb-3 d-flex align-items-center"><i class="icon-target h3 d-block"></i><div class="ms-3">icon-target</div></div>
<div class="mb-3 d-flex align-items-center"><i class="icon-volume-1 h3 d-block"></i><div class="ms-3">icon-volume-1</div></div>
<div class="mb-3 d-flex align-items-center"><i class="icon-volume-2 h3 d-block"></i><div class="ms-3">icon-volume-2</div></div>
<div class="mb-3 d-flex align-items-center"><i class="icon-volume-off h3 d-block"></i><div class="ms-3">icon-volume-off</div></div>
</div>
<!-- END col-2 -->
</div>
<!-- END row -->
</div>
<!-- END panel-body -->
<!-- BEGIN hljs-wrapper -->
<div class="hljs-wrapper">
<pre><code class="html" data-url="{% static 'data/ui-icon-simple-line-icons/code-1.json' %}"></code></pre>
</div>
<!-- END hljs-wrapper -->
</div>
<!-- END panel -->
{% endblock %}