Geira Icons npm version

NPM installation

npm install --save @geira/iconfont

Link to CSS

Add the following tag inside the html <head> tag

<link href="node_components/@geira/iconfont/dist/geira-icons.min.css" rel="stylesheet">

or import into SCSS

Import the provided SCSS file in your main SCSS file, ex: styles.scss

@import '~@geira/iconfont/dist/geira-icons.scss';

Like Material Icon with Angular

Geira Icons are similar to Material Icons. If you want to use them with or instead of Material Icons, click the link https://material.angular.io/components/icon/overview

Standard installation

Link to CSS

Add the following tag inside the html <head> tag

<link href="./geira-icons.min.css" rel="stylesheet">

In CSS (geira-icons.min.css) be sure that the path to the icons (fonts) is correct

src : url(./fonts/GeiraIcons-Regular.eot);
url(./fonts/GeiraIcons-Regular.woff2) format('woff2'),
url(./fonts/GeiraIcons-Regular.woff) format('woff'),
url(./fonts/GeiraIcons-Regular.ttf) format('truetype');

Usage

Via html

home
<i class="geira-icons">home</i>

Ex. "home" icon unicode is "\E0BA"

Change "\E0BA" to "&#xE0BA;"

<i class="geira-icons">&#xE0BA;</i>

Via CSS

.some-class::before { content: "\E0BA"; }
<i class="geira-icons some-class"></i>

Styling

Size
home
<i class="geira-icons gi-18">home</i>
home
<i class="geira-icons gi-24">home</i>
home
<i class="geira-icons gi-36">home</i>
home
<i class="geira-icons gi-48">home</i>
Color
home
<i class="geira-icons gi-light">home</i>
home
<i class="geira-icons gi-light gi-inactive">home</i>
home
<i class="geira-icons gi-light">home</i>
home
<i class="geira-icons gi-light gi-inactive">home</i>
Rotate
home
<i class="geira-icons gi-rotate-45">home</i>
home
<i class="geira-icons gi-rotate-90">home</i>
home
<i class="geira-icons gi-rotate-135">home</i>
home
<i class="geira-icons gi-rotate-180">home</i>
home
<i class="geira-icons gi-rotate-225">home</i>
home
<i class="geira-icons gi-rotate-270">home</i>
home
<i class="geira-icons gi-rotate-315">home</i>
Flip
home
<i class="geira-icons gi-flip-v">home</i>
home
<i class="geira-icons gi-flip-h">home</i>
Spin
home
<i class="geira-icons gi-spin">home</i>