@geira/iconfont
Version:
Geira Icon Font
1 lines • 8.29 kB
HTML
<html lang="en"><head><meta charset="UTF-8"><title>Geira Icons</title><link rel="apple-touch-icon" sizes="180x180" href="images/favicon/apple-touch-icon.png"><link rel="icon" type="image/png" sizes="32x32" href="images/favicon/favicon-32x32.png"><link rel="icon" type="image/png" sizes="16x16" href="images/favicon/favicon-16x16.png"><link rel="manifest" href="images/favicon/site.webmanifest"><link rel="mask-icon" href="images/favicon/safari-pinned-tab.svg" color="#5bbad5"><meta name="msapplication-TileColor" content="#2b5797"><meta name="theme-color" content="#ffffff"><script defer="defer" src="data.min.js"></script><script defer="defer" src="utils.min.js"></script><script defer="defer" src="geira-icons.min.js"></script><script defer="defer" src="styles.min.js"></script><link href="geira-icons.min.css" rel="stylesheet"><link href="styles.min.css" rel="stylesheet"></head><body><div class="main"><header><h1>Geira Icons <a href="https://badge.fury.io/js/%40geira%2Ficonfont"><img src="https://badge.fury.io/js/%40geira%2Ficonfont.svg" alt="npm version" height="18"></a></h1><ul><li><a href="index.html">Icons</a></li><li class="active"><a href="usage.html">Usage</a></li></ul><ul class="logos"><li><a href="https://www.npmjs.com/package/@geira/iconfont" target="_blank"><i class="geira-icons">npm</i></a></li><li><a href="https://github.com/liontude/geira-icons-tool" target="_blank"><i class="geira-icons">github</i></a></li></ul></header><div class="container center" style="width: 95%; max-width: 800px; align-self: center"><h2 class="title-h2">NPM installation</h2><div class="block row" style="place-content: center"><div class="icons-code"><code>npm install --save @geira/iconfont</code></div></div><h4>Link to CSS</h4><p>Add the following tag inside the html <head> tag</p><div class="block row" style="place-content: center"><div class="icons-code"><code><link href="node_components/@geira/iconfont/dist/geira-icons.min.css" rel="stylesheet"></code></div></div><h4>or import into SCSS</h4><p>Import the provided SCSS file in your main SCSS file, ex: styles.scss</p><div class="block row" style="place-content: center"><div class="icons-code"><code>@import '~@geira/iconfont/dist/geira-icons.scss';</code></div></div><h4>Like Material Icon with Angular</h4><p>Geira Icons are similar to Material Icons. If you want to use them with or instead of Material Icons, click the link <a href="https://material.angular.io/components/icon/overview" target="_blank">https://material.angular.io/components/icon/overview</a></p><h2 style="margin-top: 50px">Standard installation</h2><h4>Link to CSS</h4><p>Add the following tag inside the html <head> tag</p><div class="block row" style="place-content: center"><div class="icons-code"><code><link href="./geira-icons.min.css" rel="stylesheet"></code></div></div><p>In CSS (geira-icons.min.css) be sure that the path to the icons (fonts) is correct</p><div class="block row" style="place-content: center"><div class="icons-code"><code>src : url(./fonts/GeiraIcons-Regular.eot);<br>url(./fonts/GeiraIcons-Regular.woff2) format('woff2'),<br>url(./fonts/GeiraIcons-Regular.woff) format('woff'),<br>url(./fonts/GeiraIcons-Regular.ttf) format('truetype');</code></div></div><h2 style="margin-top: 50px">Usage</h2><h4>Via html</h4><div class="block row"><div class="icons-preview"><i class="geira-icons">home</i></div><div class="icons-code"><code><i class="geira-icons">home</i></code></div></div><p style="margin-top: 30px">Ex. "home" icon unicode is "\E0BA"</p><p style="margin-bottom: 10px">Change "<strong>\</strong>E0BA" to "<strong>&#x</strong>E0BA<strong>;</strong>"</p><div class="block row"><div class="icons-preview"><i class="geira-icons"></i></div><div class="icons-code"><code><i class="geira-icons">&#xE0BA;</i></code></div></div><h4>Via CSS</h4><div class="block row" style="place-content: center"><div class="icons-code"><code style="padding: 20px; text-align: center">.some-class::before { content: "\E0BA"; }</code></div></div><div class="block row"><div class="icons-preview"><i class="geira-icons some-class"></i></div><div class="icons-code"><code><i class="geira-icons some-class"></i></code></div></div><h3 style="margin-top: 50px">Styling</h3><h5>Size</h5><div class="block row"><div class="icons-preview"><i class="geira-icons gi-18">home</i></div><div class="icons-code"><code><i class="geira-icons gi-18">home</i></code></div></div><div class="block row"><div class="icons-preview"><i class="geira-icons gi-24">home</i></div><div class="icons-code"><code><i class="geira-icons gi-24">home</i></code></div></div><div class="block row"><div class="icons-preview"><i class="geira-icons gi-36">home</i></div><div class="icons-code"><code><i class="geira-icons gi-36">home</i></code></div></div><div class="block row"><div class="icons-preview"><i class="geira-icons gi-48">home</i></div><div class="icons-code"><code><i class="geira-icons gi-48">home</i></code></div></div><h5>Color</h5><div class="block row"><div class="icons-preview" style="background-color: #263238"><i class="geira-icons gi-light">home</i></div><div class="icons-code"><code><i class="geira-icons gi-light">home</i></code></div></div><div class="block row"><div class="icons-preview" style="background-color: #263238"><i class="geira-icons gi-light gi-inactive">home</i></div><div class="icons-code"><code><i class="geira-icons gi-light gi-inactive">home</i></code></div></div><div class="block row"><div class="icons-preview"><i class="geira-icons gi-dark">home</i></div><div class="icons-code"><code><i class="geira-icons gi-light">home</i></code></div></div><div class="block row"><div class="icons-preview"><i class="geira-icons gi-dark gi-inactive">home</i></div><div class="icons-code"><code><i class="geira-icons gi-light gi-inactive">home</i></code></div></div><h5>Rotate</h5><div class="block row"><div class="icons-preview"><i class="geira-icons gi-rotate-45">home</i></div><div class="icons-code"><code><i class="geira-icons gi-rotate-45">home</i></code></div></div><div class="block row"><div class="icons-preview"><i class="geira-icons gi-rotate-90">home</i></div><div class="icons-code"><code><i class="geira-icons gi-rotate-90">home</i></code></div></div><div class="block row"><div class="icons-preview"><i class="geira-icons gi-rotate-135">home</i></div><div class="icons-code"><code><i class="geira-icons gi-rotate-135">home</i></code></div></div><div class="block row"><div class="icons-preview"><i class="geira-icons gi-rotate-180">home</i></div><div class="icons-code"><code><i class="geira-icons gi-rotate-180">home</i></code></div></div><div class="block row"><div class="icons-preview"><i class="geira-icons gi-rotate-225">home</i></div><div class="icons-code"><code><i class="geira-icons gi-rotate-225">home</i></code></div></div><div class="block row"><div class="icons-preview"><i class="geira-icons gi-rotate-270">home</i></div><div class="icons-code"><code><i class="geira-icons gi-rotate-270">home</i></code></div></div><div class="block row"><div class="icons-preview"><i class="geira-icons gi-rotate-315">home</i></div><div class="icons-code"><code><i class="geira-icons gi-rotate-315">home</i></code></div></div><h5>Flip</h5><div class="block row"><div class="icons-preview"><i class="geira-icons gi-flip-v">home</i></div><div class="icons-code"><code><i class="geira-icons gi-flip-v">home</i></code></div></div><div class="block row"><div class="icons-preview"><i class="geira-icons gi-flip-h">home</i></div><div class="icons-code"><code><i class="geira-icons gi-flip-h">home</i></code></div></div><h5>Spin</h5><div class="block row"><div class="icons-preview"><i class="geira-icons gi-spin">home</i></div><div class="icons-code"><code><i class="geira-icons gi-spin">home</i></code></div></div></div><footer><p>©2025 <a style="color: inherit; text-decoration: none;" href="https://liontude.com" target="_blank">Liontude</a>. All Rights Reserved. Released under MIT License</p></footer></div></body></html>