Files
citrus-cms/template/docs/font-icons.html
T
2026-04-28 21:15:09 +03:00

169 lines
7.3 KiB
HTML
Raw Blame History

This file contains ambiguous Unicode characters
This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.
<!DOCTYPE html>
<html lang="en">
<head>
<title>Doc - Blogzine Theme</title>
<!-- Meta Tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta name="author" content="Webestica.com">
<!-- Favicon -->
<link rel="shortcut icon" href="assets/images/favicon.ico">
<!-- Google Font -->
<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Nunito+Sans:wght@400;700&family=Rubik:wght@400;500;700&display=swap" rel="stylesheet">
<!-- Plugins CSS -->
<link rel="stylesheet" type="text/css" href="assets/vendor/font-awesome/css/all.min.css">
<!-- Theme CSS -->
<link rel="stylesheet" type="text/css" href="assets/css/style.css">
<link rel="stylesheet" type="text/css" href="assets/css/doc.css">
<link rel="stylesheet" type="text/css" href="assets/css/prism.css">
<link rel="stylesheet" type="text/css" href="assets/vendor/glightbox/css/glightbox.css">
</head>
<body>
<!-- **************** MAIN CONTENT START **************** -->
<main>
<!-- Navbar top START -->
<div class="navbar-top bg-dark px-3 px-sm-4 px-md-5">
<div class="d-flex justify-content-between align-items-center">
<!-- Logo START -->
<a class="navbar-brand py-3" href="index.html">
<img class="navbar-brand-item" src="assets/images/logo.svg" alt="logo">
</a>
<!-- Logo END -->
<!-- Navbar right -->
<div>
<ul class="text-end list-inline m-0">
<li class="list-inline-item me-2 me-md-4"> <a class="text-white" href="https://blogzine.webestica.com">Live Preview</a> </li>
<li class="list-inline-item me-2 me-md-4"> <a class="text-white" href="https://support.webestica.com" target="_blank">Support</a> </li>
<li class="list-inline-item text-white"> <span class="badge bg-danger text-white">v1.2.0</span></li>
</ul>
</div>
</div>
</div>
<!-- Navbar top END -->
<div class="container-fluid px-0">
<div class="page-wrapper">
<!-- Left sidebar START -->
<nav class="navbar navbar-expand-sm navbar-light bg-light px-3">
<a class="navbar-brand py-2 d-sm-none" href="#">Doc nav</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#docNav" aria-controls="docNav" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="docNav">
<div class="left-sidebar bg-light">
<div class="content h-100vh">
<div class="list-group list-group-borderless p-3 p-md-4">
<b class="text-dark text-uppercase mb-2">Getting Started</b>
<a class="list-group-item" href="index.html">Introduction</a>
<a class="list-group-item" href="gulp.html">Gulp</a>
<a class="list-group-item" href="customization.html">Customization</a>
<a class="list-group-item" href="color-scheme.html">Color Scheme</a>
<a class="list-group-item" href="logo-settings.html">Logo Settings</a>
<a class="list-group-item" href="page-loading.html">Page Loading</a>
<a class="list-group-item" href="fonts.html">Fonts</a>
<a class="list-group-item" href="dark-mode.html">Dark mode</a>
<a class="list-group-item" href="rtl.html">RTL Version</a>
<a class="list-group-item" href="lazy-load.html">Lazy Load</a>
<a class="list-group-item" href="sources-and-credits.html">Sources and Credits</a>
<a class="list-group-item" href="changelog.html">Changelog</a>
<a class="list-group-item" href="updates.html">Updates</a>
<a class="list-group-item" href="support.html">Support</a>
<b class="text-dark text-uppercase mt-3 mb-2">Component</b>
<a class="list-group-item" href="alerts.html">Alerts</a>
<a class="list-group-item" href="avatar.html">Avatar</a>
<a class="list-group-item" href="badges.html">Badges</a>
<a class="list-group-item" href="breadcrumb.html">Breadcrumb</a>
<a class="list-group-item" href="buttons.html">Buttons</a>
<a class="list-group-item" href="card.html">Card</a>
<a class="list-group-item" href="font-icons.html">Font icons</a>
<a class="list-group-item" href="google-map.html">Google Map</a>
<a class="list-group-item" href="nav-and-tabs.html">Nav and Tabs</a>
<a class="list-group-item" href="pagination.html">Pagination</a>
<a class="list-group-item" href="progress.html">Progress</a>
<a class="list-group-item" href="sticky-element.html">Sticky element</a>
<a class="list-group-item" href="sticky-footer.html">Sticky footer</a>
<a class="list-group-item" href="utility-classes.html">Utility classes</a>
<b class="text-dark text-uppercase mt-3 mb-2">Plugins</b>
<a class="list-group-item" href="tiny-slider.html">Tiny Slider</a>
</div>
</div>
</div>
</div>
</nav>
<!-- Left sidebar END -->
<!-- Main content START -->
<div class="main-content">
<div class="row">
<div class="col-12">
<!-- Page title -->
<div class="my-5">
<h1>Font icons</h1>
<p class="lead">Retina-ready font icons with a very modern touch that will beautifully compliment your project.</p>
<hr class="my-5">
</div>
<!-- Page content START -->
<p>We have included <a href="https://fontawesome.com/icons?d=gallery&m=free" target="_blank">Font awesome</a> and <a href="https://icons.getbootstrap.com/" target="_blank">Bootstrap Icons</a> fonts in Blogzine theme.</p>
<h5>Font awesome:</h5>
<p>You can place Font Awesome icons just about anywhere using a style prefix and the icons name. To reference an icon, you need to know two bits of information.</p>
<ol class="mb-4">
<li>Its name, prefixed with <code class="inline">fa-</code> (meaning “font awesome” naturally!)</li>
<li>The style you want to use's corresponding prefix</li>
</ol>
<pre>
<code class="language-markup">
&lt;i class="fas fa-camera"&gt;&lt;/i&gt; &lt;!-- this icon's 1) style prefix == fas and 2) icon name == camera --&gt;
&lt;i class="fas fa-camera"&gt;&lt;/i&gt; &lt;!-- using an &lt;i&gt; element to reference the icon --&gt;
&lt;span class="fas fa-camera"&gt;&lt;/span&gt; &lt;!-- using a &lt;span&gt; element to reference the icon --&gt;
</code>
</pre>
<p class="mt-3">A complete list of Font awesome icons along with the class names can be<a href="https://fontawesome.com/icons?d=gallery&m=free" target="_blank"> found here</a></p>
<h5 class="mt-5">Bootstrap Icons:</h5>
<p>You can place Bootstrap Icons just about anywhere using icon's name. See below example code:</p>
<pre>
<code class="language-markup">
&lt;i class="bi bi-alarm-fill"&gt;&lt;/i&gt;
</code>
</pre>
<p class="mt-3">A complete list of Bootstrap icons along with the class names can be <a href="https://icons.getbootstrap.com/" target="_blank">found here</a></p>
<!-- Tab END -->
<!-- Page content END -->
</div>
</div>
</div>
<!-- Main content END -->
</div>
</div>
</main>
<!-- =======================
JavaScripts -->
<!-- Bootstrap JS -->
<script src="assets/js/bootstrap.bundle.min.js"></script>
<script src="assets/js/simple-scrollbar.min.js"></script>
<script src="assets/js/prism.js"></script>
<script src="assets/js/clipboard.min.js"></script>
<script src="assets/vendor/glightbox/js/glightbox.js"></script>
<!-- Template Functions -->
<script src="assets/js/functions.js"></script>
</body>
</html>