351 lines
14 KiB
HTML
351 lines
14 KiB
HTML
<!doctype html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8" />
|
|
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
|
<title>brz9 Icon Font</title>
|
|
<link rel="stylesheet" href="style.css" />
|
|
<link
|
|
rel="stylesheet"
|
|
href="https://file.brz9.dev/cdn/fonts/brz9-v2.6/style.css"
|
|
/>
|
|
|
|
<link
|
|
rel="stylesheet"
|
|
href="https://file.brz9.dev/web/js/highlight/hlb9c.css"
|
|
/>
|
|
</head>
|
|
<body>
|
|
<div id="root">
|
|
<main>
|
|
<h1>Icon font</h1>
|
|
<p>
|
|
This icon font was created with
|
|
<a
|
|
href="https://icomoon.io/"
|
|
target="_blank"
|
|
rel="noopener noreferrer"
|
|
class="ext"
|
|
>Icomoon</a
|
|
>. I tried to group them by category. You can download the
|
|
whole pack as a zip
|
|
<a
|
|
href="https://file.brz9.dev/cdn/fonts/brz9-v2.6.zip"
|
|
target="_blank"
|
|
rel="noopener noreferrer"
|
|
class="ext"
|
|
>here</a
|
|
>. This page can be used to copy the utf8 characters by
|
|
clicking on the icons. This can be useful to use them in
|
|
Inkscape or GIMP after installing the .ttf file on your
|
|
computer. By clicking on the name of the icon, the html span
|
|
with the appropriate class in your clipboard.
|
|
</p>
|
|
|
|
<p>
|
|
You can import the icon font in your head tag using the link
|
|
below:
|
|
</p>
|
|
<copyfontimportlink>
|
|
<pre><code class="language-xml"><link rel="stylesheet" href="https://file.brz9.dev/cdn/fonts/brz9-v2.6/style.css"></code></pre>
|
|
</copyfontimportlink>
|
|
<p>
|
|
<i
|
|
>(but please be aware that the link might break at some
|
|
point, you'd better download the zip file and host it
|
|
yoursel)</i
|
|
>
|
|
</p>
|
|
|
|
<nav class="main_nav">
|
|
<ul>
|
|
<li><a href="#icon-os">OS</a></li>
|
|
<li><a href="#icon-mu">Music Streaming</a></li>
|
|
<li><a href="#icon-pay">Payment</a></li>
|
|
<li><a href="#icon-nav">Navigation</a></li>
|
|
<li><a href="#icon-form">Form</a></li>
|
|
<li><a href="#icon-network">Network</a></li>
|
|
<li><a href="#icon-alert">Alert</a></li>
|
|
<li><a href="#icon-time">Time</a></li>
|
|
<li><a href="#icon-login">Login</a></li>
|
|
<li><a href="#icon-afknav">AFK Navigation</a></li>
|
|
<li><a href="#icon-fediverse">Fediverse</a></li>
|
|
<li><a href="#icon-social">Social Network</a></li>
|
|
<li><a href="#icon-privacy">Privacy</a></li>
|
|
<li><a href="#icon-communication">Communication</a></li>
|
|
<li><a href="#icon-edit">Edit</a></li>
|
|
<li><a href="#icon-keyboard">Keyboard</a></li>
|
|
<li><a href="#icon-media">Media</a></li>
|
|
<li><a href="#icon-file">Files</a></li>
|
|
<li><a href="#icon-device">Devices</a></li>
|
|
<li><a href="#icon-screen">Screen</a></li>
|
|
<li><a href="#icon-programming">Programming</a></li>
|
|
<li><a href="#icon-spin">Spinners</a></li>
|
|
<li><a href="#icon-license">License</a></li>
|
|
<li><a href="#icon-politics">Politics</a></li>
|
|
</ul>
|
|
</nav>
|
|
|
|
<section class="icon-grids">
|
|
<h2 id="icon-os">OS</h2>
|
|
<div class="icongrid">
|
|
<div
|
|
class="icon-grid-item"
|
|
v-for="icon in os"
|
|
:key="icon"
|
|
>
|
|
<icon :name="icon"></icon>
|
|
</div>
|
|
</div>
|
|
<h2 id="icon-mu">Music Streaming</h2>
|
|
<div class="icongrid">
|
|
<div
|
|
class="icon-grid-item"
|
|
v-for="icon in streaming"
|
|
:key="icon"
|
|
>
|
|
<icon :name="icon"></icon>
|
|
</div>
|
|
</div>
|
|
<h2 id="icon-pay">Payment</h2>
|
|
<div class="icongrid">
|
|
<div
|
|
class="icon-grid-item"
|
|
v-for="icon in payment"
|
|
:key="icon"
|
|
>
|
|
<icon :name="icon"></icon>
|
|
</div>
|
|
</div>
|
|
<h2 id="icon-nav">Navigation</h2>
|
|
<div class="icongrid">
|
|
<div
|
|
class="icon-grid-item"
|
|
v-for="icon in navigation"
|
|
:key="icon"
|
|
>
|
|
<icon :name="icon"></icon>
|
|
</div>
|
|
</div>
|
|
<h2 id="icon-form">Form</h2>
|
|
<div class="icongrid">
|
|
<div
|
|
class="icon-grid-item"
|
|
v-for="icon in form"
|
|
:key="icon"
|
|
>
|
|
<icon :name="icon"></icon>
|
|
</div>
|
|
</div>
|
|
<h2 id="icon-network">Network</h2>
|
|
<div class="icongrid">
|
|
<div
|
|
class="icon-grid-item"
|
|
v-for="icon in network"
|
|
:key="icon"
|
|
>
|
|
<icon :name="icon"></icon>
|
|
</div>
|
|
</div>
|
|
<h2 id="icon-alert">Alert</h2>
|
|
<div class="icongrid">
|
|
<div
|
|
class="icon-grid-item"
|
|
v-for="icon in alert"
|
|
:key="icon"
|
|
>
|
|
<icon :name="icon"></icon>
|
|
</div>
|
|
</div>
|
|
<h2 id="icon-time">Time</h2>
|
|
<div class="icongrid">
|
|
<div
|
|
class="icon-grid-item"
|
|
v-for="icon in time"
|
|
:key="icon"
|
|
>
|
|
<icon :name="icon"></icon>
|
|
</div>
|
|
</div>
|
|
<h2 id="icon-login">Login</h2>
|
|
<div class="icongrid">
|
|
<div
|
|
class="icon-grid-item"
|
|
v-for="icon in login"
|
|
:key="icon"
|
|
>
|
|
<icon :name="icon"></icon>
|
|
</div>
|
|
</div>
|
|
<h2 id="icon-afknav">AFK Navigation</h2>
|
|
<div class="icongrid">
|
|
<div
|
|
class="icon-grid-item"
|
|
v-for="icon in afknav"
|
|
:key="icon"
|
|
>
|
|
<icon :name="icon"></icon>
|
|
</div>
|
|
</div>
|
|
<h2 id="icon-fediverse">Fediverse</h2>
|
|
<div class="icongrid">
|
|
<div
|
|
class="icon-grid-item"
|
|
v-for="icon in fediverse"
|
|
:key="icon"
|
|
>
|
|
<icon :name="icon"></icon>
|
|
</div>
|
|
</div>
|
|
<h2 id="icon-social">Social Network</h2>
|
|
<div class="icongrid">
|
|
<div
|
|
class="icon-grid-item"
|
|
v-for="icon in socials"
|
|
:key="icon"
|
|
>
|
|
<icon :name="icon"></icon>
|
|
</div>
|
|
</div>
|
|
<h2 id="icon-privacy">Privacy</h2>
|
|
<div class="icongrid">
|
|
<div
|
|
class="icon-grid-item"
|
|
v-for="icon in privacy"
|
|
:key="icon"
|
|
>
|
|
<icon :name="icon"></icon>
|
|
</div>
|
|
</div>
|
|
<h2 id="icon-communication">Communication</h2>
|
|
<div class="icongrid">
|
|
<div
|
|
class="icon-grid-item"
|
|
v-for="icon in spyware"
|
|
:key="icon"
|
|
>
|
|
<icon :name="icon"></icon>
|
|
</div>
|
|
</div>
|
|
<h2 id="icon-edit">Edit</h2>
|
|
<div class="icongrid">
|
|
<div
|
|
class="icon-grid-item"
|
|
v-for="icon in edit"
|
|
:key="icon"
|
|
>
|
|
<icon :name="icon"></icon>
|
|
</div>
|
|
</div>
|
|
<h2 id="icon-keyboard">Keyboard</h2>
|
|
<div class="icongrid">
|
|
<div
|
|
class="icon-grid-item"
|
|
v-for="icon in keyboard"
|
|
:key="icon"
|
|
>
|
|
<icon :name="icon"></icon>
|
|
</div>
|
|
</div>
|
|
<h2 id="icon-media">Media</h2>
|
|
<div class="icongrid">
|
|
<div
|
|
class="icon-grid-item"
|
|
v-for="icon in media"
|
|
:key="icon"
|
|
>
|
|
<icon :name="icon"></icon>
|
|
</div>
|
|
</div>
|
|
<h2 id="icon-file">Files</h2>
|
|
<div class="icongrid">
|
|
<div
|
|
class="icon-grid-item"
|
|
v-for="icon in files"
|
|
:key="icon"
|
|
>
|
|
<icon :name="icon"></icon>
|
|
</div>
|
|
</div>
|
|
<h2 id="icon-device">Devices</h2>
|
|
<div class="icongrid">
|
|
<div
|
|
class="icon-grid-item"
|
|
v-for="icon in devices"
|
|
:key="icon"
|
|
>
|
|
<icon :name="icon"></icon>
|
|
</div>
|
|
</div>
|
|
<h2 id="icon-screen">Screen</h2>
|
|
<div class="icongrid">
|
|
<div
|
|
class="icon-grid-item"
|
|
v-for="icon in screen"
|
|
:key="icon"
|
|
>
|
|
<icon :name="icon"></icon>
|
|
</div>
|
|
</div>
|
|
<h2 id="icon-programming">Programming</h2>
|
|
<div class="icongrid">
|
|
<div
|
|
class="icon-grid-item"
|
|
v-for="icon in programing"
|
|
:key="icon"
|
|
>
|
|
<icon :name="icon"></icon>
|
|
</div>
|
|
</div>
|
|
<h2 id="icon-spin">Spinners</h2>
|
|
<p>To make this kind of spinner:</p>
|
|
<div class="spindemo">
|
|
<span class="brz9-icon-spinner2"></span>
|
|
</div>
|
|
<p>You can use the following:</p>
|
|
<div class="icongrid">
|
|
<div
|
|
class="icon-grid-item"
|
|
v-for="icon in spinners"
|
|
:key="icon"
|
|
>
|
|
<icon :name="icon"></icon>
|
|
</div>
|
|
</div>
|
|
<h2 id="icon-license">License</h2>
|
|
<div class="icongrid">
|
|
<div
|
|
class="icon-grid-item"
|
|
v-for="icon in license"
|
|
:key="icon"
|
|
>
|
|
<icon :name="icon"></icon>
|
|
</div>
|
|
</div>
|
|
<h2 id="icon-politics">Politics</h2>
|
|
<div class="icongrid">
|
|
<div
|
|
class="icon-grid-item"
|
|
v-for="icon in politics"
|
|
:key="icon"
|
|
>
|
|
<icon :name="icon"></icon>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<a href="#root" class="go-up" alt="">
|
|
<span class="brz9-icon-chevron-up"></span>
|
|
</a>
|
|
</main>
|
|
</div>
|
|
</body>
|
|
<script src="https://ed.brz9.dev/assets/js/vue.min.js"></script>
|
|
<script src="icons.js"></script>
|
|
<script src="https://file.brz9.dev/web/js/highlight/highlight.min.js"></script>
|
|
<script>
|
|
hljs.initHighlightingOnLoad();
|
|
</script>
|
|
</html>
|