app/views/styleguide/06 Icons/_icons.html
<section class="sg-body">
<section class="sg-example" id="6.1">
<h3>
<a href="#6.1">6.1</a>
</h3>
<div class="sg-description">
<span class="sg-filename">_icons.scss</span>
<h2>Arrow Icons <code>.icon-arrow-</code></h2>
<p>By default, icons inherit font colour from their parent. A few modifier classes are provided to alter icon's colour when needed:</p>
<ul class="sg-modifiers">
<li>
<strong>.bright</strong>
-
White variation
</li>
<li>
<strong>.mid</strong>
-
Grey variation
</li>
<li>
<strong>.branded</strong>
-
Branded variation
</li>
</ul>
<p>Arrow icons come also with small size variation:</p>
<ul class="sg-modifiers">
<li>
<strong>.small</strong>
-
Small variation
</li>
</ul>
</div>
<div class="sg-canvases">
<div class="align-left bg-light sg-canvas">
<div style="">
<i class="icon-arrow-up"></i>
<i class="icon-arrow-right"></i>
<i class="icon-arrow-down"></i>
<i class="icon-arrow-left"></i>
</div>
</div>
<div class="align-left bg-light sg-canvas sg-modifier">
<span class="sg-modifier-name">.bright</span>
<div style="">
<i class="icon-arrow-up bright"></i>
<i class="icon-arrow-right bright"></i>
<i class="icon-arrow-down bright"></i>
<i class="icon-arrow-left bright"></i>
</div>
</div>
<div class="align-left bg-light sg-canvas sg-modifier">
<span class="sg-modifier-name">.mid</span>
<div style="">
<i class="icon-arrow-up mid"></i>
<i class="icon-arrow-right mid"></i>
<i class="icon-arrow-down mid"></i>
<i class="icon-arrow-left mid"></i>
</div>
</div>
<div class="align-left bg-light sg-canvas sg-modifier">
<span class="sg-modifier-name">.branded</span>
<div style="">
<i class="icon-arrow-up branded"></i>
<i class="icon-arrow-right branded"></i>
<i class="icon-arrow-down branded"></i>
<i class="icon-arrow-left branded"></i>
</div>
</div>
</div>
<div class="sg-description">
<p>Arrow icons come also with small size variation. These modifier classes can be combined, hence following cominations are possible: <code>.icon-arrow-up.small.branded</code>.</p>
<ul class="sg-modifiers">
<li>
<strong>.small</strong>
-
Small variation
</li>
</ul>
</div>
<div class="sg-canvases">
<div class="align-left bg-light sg-canvas sg-modifier">
<span class="sg-modifier-name">.small</span>
<div style="">
<i class="icon-arrow-up small"></i>
<i class="icon-arrow-right small"></i>
<i class="icon-arrow-down small"></i>
<i class="icon-arrow-left small"></i>
</div>
</div>
</div>
</section>
<section class="sg-example" id="6.2">
<h3>
<a href="#6.2">6.2</a>
</h3>
<div class="sg-description">
<span class="sg-filename">_icons.scss</span>
<h2>Privacy Icons <code>.icon-privacy-</code></h2>
<p>By default, icons inherit font colour from their parent. A few modifier classes are provided to alter icon's colour when needed:</p>
<ul class="sg-modifiers">
<li>
<strong>.bright</strong>
-
White variation
</li>
<li>
<strong>.mid</strong>
-
Grey variation
</li>
<li>
<strong>.branded</strong>
-
Branded variation
</li>
</ul>
</div>
<div class="sg-canvases">
<div class="align-left bg-light sg-canvas">
<div style="">
<i class="icon-privacy-open"></i>
<i class="icon-privacy-private"></i>
<i class="icon-privacy-private-alt"></i>
<i class="icon-privacy-group"></i>
<i class="icon-privacy-group-alt"></i>
</div>
</div>
<div class="align-left bg-light sg-canvas sg-modifier">
<span class="sg-modifier-name">.bright</span>
<div style="">
<i class="icon-privacy-open bright"></i>
<i class="icon-privacy-private bright"></i>
<i class="icon-privacy-private-alt bright"></i>
<i class="icon-privacy-group bright"></i>
<i class="icon-privacy-group-alt bright"></i>
</div>
</div>
<div class="align-left bg-light sg-canvas sg-modifier">
<span class="sg-modifier-name">.mid</span>
<div style="">
<i class="icon-privacy-open mid"></i>
<i class="icon-privacy-private mid"></i>
<i class="icon-privacy-private-alt mid"></i>
<i class="icon-privacy-group mid"></i>
<i class="icon-privacy-group-alt mid"></i>
</div>
</div>
<div class="align-left bg-light sg-canvas sg-modifier">
<span class="sg-modifier-name">.branded</span>
<div style="">
<i class="icon-privacy-open branded"></i>
<i class="icon-privacy-private branded"></i>
<i class="icon-privacy-private-alt branded"></i>
<i class="icon-privacy-group branded"></i>
<i class="icon-privacy-group-alt branded"></i>
</div>
</div>
</div>
</section>
<section class="sg-example" id="6.3">
<h3>
<a href="#6.3">6.3</a>
</h3>
<div class="sg-description">
<span class="sg-filename">_icons.scss</span>
<h2>Visualization Mode Icons <code>.icon-vis</code></h2>
<p>By default, icons inherit font colour from their parent. A few modifier classes are provided to alter icon's colour when needed:</p>
<ul class="sg-modifiers">
<li>
<strong>.bright</strong>
-
White variation
</li>
<li>
<strong>.mid</strong>
-
Grey variation
</li>
<li>
<strong>.branded</strong>
-
Branded variation
</li>
</ul>
</div>
<div class="sg-canvases">
<div class="align-left bg-light sg-canvas">
<div style="">
<i class="icon-vis-list"></i>
<i class="icon-vis-graph"></i>
<i class="icon-vis-miniature"></i>
<i class="icon-vis-grid"></i>
<i class="icon-vis-pins"></i>
</div>
</div>
<div class="align-left bg-light sg-canvas sg-modifier">
<span class="sg-modifier-name">.bright</span>
<div style="">
<i class="icon-vis-list bright"></i>
<i class="icon-vis-graph bright"></i>
<i class="icon-vis-miniature bright"></i>
<i class="icon-vis-grid bright"></i>
<i class="icon-vis-pins bright"></i>
</div>
</div>
<div class="align-left bg-light sg-canvas sg-modifier">
<span class="sg-modifier-name">.mid</span>
<div style="">
<i class="icon-vis-list mid"></i>
<i class="icon-vis-graph mid"></i>
<i class="icon-vis-miniature mid"></i>
<i class="icon-vis-grid mid"></i>
<i class="icon-vis-pins mid"></i>
</div>
</div>
<div class="align-left bg-light sg-canvas sg-modifier">
<span class="sg-modifier-name">.branded</span>
<div style="">
<i class="icon-vis-list branded"></i>
<i class="icon-vis-graph branded"></i>
<i class="icon-vis-miniature branded"></i>
<i class="icon-vis-grid branded"></i>
<i class="icon-vis-pins branded"></i>
</div>
</div>
</div>
</section>
<section class="sg-example" id="6.4">
<h3>
<a href="#6.4">6.4</a>
</h3>
<div class="sg-description">
<span class="sg-filename">_icons.scss</span>
<h2>Other Icons <code>.icon-</code></h2>
<p>By default, icons inherit font colour from their parent. A few modifier classes are provided to alter icon's colour when needed:</p>
<ul class="sg-modifiers">
<li>
<strong>.bright</strong>
-
White variation
</li>
<li>
<strong>.mid</strong>
-
Grey variation
</li>
<li>
<strong>.branded</strong>
-
Branded variation
</li>
</ul>
</div>
<div class="sg-canvases">
<div class="align-left bg-light sg-canvas">
<div style="">
<i class="icon-madek"></i>
<i class="icon-pen"></i>
<i class="icon-cog"></i>
<i class="icon-filter"></i>
<i class="icon-plus"></i>
<i class="icon-plus-small"></i>
<i class="icon-upload"></i>
<i class="icon-dload"></i>
<i class="icon-checkmark"></i>
<i class="icon-lock"></i>
<i class="icon-eye"></i>
<i class="icon-move"></i>
<i class="icon-cover"></i>
<i class="icon-set"></i>
<i class="icon-media-entry"></i>
<i class="icon-tag"></i>
<i class="icon-tags"></i>
<i class="icon-trash"></i>
<i class="icon-user"></i>
<i class="icon-add-user"></i>
<i class="icon-add-group"></i>
<i class="icon-admin"></i>
<i class="icon-home"></i>
<i class="icon-power-off"></i>
<i class="icon-lens"></i>
<i class="icon-magnifier"></i>
<i class="icon-highlight"></i>
<i class="icon-star"></i>
<i class="icon-clipboard"></i>
<i class="icon-question-mark"></i>
<i class="icon-question"></i>
<i class="icon-bang"></i>
<i class="icon-close"></i>
<i class="icon-copy"></i>
<i class="icon-contrast"></i>
<i class="icon-undo"></i>
<i class="icon-catalog"></i>
<i class="icon-link"></i>
<i class="icon-api"></i>
<i class="icon-library"></i>
</div>
</div>
<div class="align-left bg-light sg-canvas sg-modifier">
<span class="sg-modifier-name">.bright</span>
<div style="">
<i class="icon-madek bright"></i>
<i class="icon-pen bright"></i>
<i class="icon-cog bright"></i>
<i class="icon-filter bright"></i>
<i class="icon-plus bright"></i>
<i class="icon-plus-small bright"></i>
<i class="icon-upload bright"></i>
<i class="icon-dload bright"></i>
<i class="icon-checkmark bright"></i>
<i class="icon-lock bright"></i>
<i class="icon-eye bright"></i>
<i class="icon-move bright"></i>
<i class="icon-cover bright"></i>
<i class="icon-set bright"></i>
<i class="icon-media-entry bright"></i>
<i class="icon-tag bright"></i>
<i class="icon-tags bright"></i>
<i class="icon-trash bright"></i>
<i class="icon-user bright"></i>
<i class="icon-add-user bright"></i>
<i class="icon-add-group bright"></i>
<i class="icon-admin bright"></i>
<i class="icon-home bright"></i>
<i class="icon-power-off bright"></i>
<i class="icon-lens bright"></i>
<i class="icon-magnifier bright"></i>
<i class="icon-highlight bright"></i>
<i class="icon-star bright"></i>
<i class="icon-clipboard bright"></i>
<i class="icon-question-mark bright"></i>
<i class="icon-question bright"></i>
<i class="icon-bang bright"></i>
<i class="icon-close bright"></i>
<i class="icon-copy bright"></i>
<i class="icon-contrast bright"></i>
<i class="icon-undo bright"></i>
<i class="icon-catalog bright"></i>
<i class="icon-link bright"></i>
<i class="icon-api bright"></i>
<i class="icon-library bright"></i>
</div>
</div>
<div class="align-left bg-light sg-canvas sg-modifier">
<span class="sg-modifier-name">.mid</span>
<div style="">
<i class="icon-madek mid"></i>
<i class="icon-pen mid"></i>
<i class="icon-cog mid"></i>
<i class="icon-filter mid"></i>
<i class="icon-plus mid"></i>
<i class="icon-plus-small mid"></i>
<i class="icon-upload mid"></i>
<i class="icon-dload mid"></i>
<i class="icon-checkmark mid"></i>
<i class="icon-lock mid"></i>
<i class="icon-eye mid"></i>
<i class="icon-move mid"></i>
<i class="icon-cover mid"></i>
<i class="icon-set mid"></i>
<i class="icon-media-entry mid"></i>
<i class="icon-tag mid"></i>
<i class="icon-tags mid"></i>
<i class="icon-trash mid"></i>
<i class="icon-user mid"></i>
<i class="icon-add-user mid"></i>
<i class="icon-add-group mid"></i>
<i class="icon-admin mid"></i>
<i class="icon-home mid"></i>
<i class="icon-power-off mid"></i>
<i class="icon-lens mid"></i>
<i class="icon-magnifier mid"></i>
<i class="icon-highlight mid"></i>
<i class="icon-star mid"></i>
<i class="icon-clipboard mid"></i>
<i class="icon-question-mark mid"></i>
<i class="icon-question mid"></i>
<i class="icon-bang mid"></i>
<i class="icon-close mid"></i>
<i class="icon-copy mid"></i>
<i class="icon-contrast mid"></i>
<i class="icon-undo mid"></i>
<i class="icon-catalog mid"></i>
<i class="icon-link mid"></i>
<i class="icon-api mid"></i>
<i class="icon-library mid"></i>
</div>
</div>
<div class="align-left bg-light sg-canvas sg-modifier">
<span class="sg-modifier-name">.branded</span>
<div style="">
<i class="icon-madek branded"></i>
<i class="icon-pen branded"></i>
<i class="icon-cog branded"></i>
<i class="icon-filter branded"></i>
<i class="icon-plus branded"></i>
<i class="icon-plus-small branded"></i>
<i class="icon-upload branded"></i>
<i class="icon-dload branded"></i>
<i class="icon-checkmark branded"></i>
<i class="icon-lock branded"></i>
<i class="icon-eye branded"></i>
<i class="icon-move branded"></i>
<i class="icon-cover branded"></i>
<i class="icon-set branded"></i>
<i class="icon-media-entry branded"></i>
<i class="icon-tag branded"></i>
<i class="icon-tags branded"></i>
<i class="icon-trash branded"></i>
<i class="icon-user branded"></i>
<i class="icon-add-user branded"></i>
<i class="icon-add-group branded"></i>
<i class="icon-admin branded"></i>
<i class="icon-home branded"></i>
<i class="icon-power-off branded"></i>
<i class="icon-lens branded"></i>
<i class="icon-magnifier branded"></i>
<i class="icon-highlight branded"></i>
<i class="icon-star branded"></i>
<i class="icon-clipboard branded"></i>
<i class="icon-question-mark branded"></i>
<i class="icon-question branded"></i>
<i class="icon-bang branded"></i>
<i class="icon-close branded"></i>
<i class="icon-copy branded"></i>
<i class="icon-contrast branded"></i>
<i class="icon-undo branded"></i>
<i class="icon-catalog branded"></i>
<i class="icon-link branded"></i>
<i class="icon-api branded"></i>
<i class="icon-library branded"></i>
</div>
</div>
</div>
</section>
<section class="sg-example" id="6.5">
<h3>
<a href="#6.5">6.5</a>
</h3>
<div class="sg-description">
<span class="sg-filename">_icons.scss</span>
<h2>Special Icons <code>.icon-</code></h2>
<ul class="sg-modifiers">
<li>
<strong>.hover</strong>
-
Hover variation
</li>
<li>
<strong>.disabled</strong>
-
Disabled variation
</li>
<li>
<strong>.active</strong>
-
Pressed variation
</li>
</ul>
</div>
<div class="sg-canvases">
<div class="align-left bg-light sg-canvas">
<div style="">
<i class="icon-checkbox"></i>
<i class="icon-checkbox-bright"></i>
<i class="icon-star-empty"></i>
</div>
</div>
<div class="align-left bg-light sg-canvas sg-modifier">
<span class="sg-modifier-name">.hover</span>
<div style="">
<i class="icon-checkbox hover"></i>
<i class="icon-checkbox-bright hover"></i>
<i class="icon-star-empty hover"></i>
</div>
</div>
<div class="align-left bg-light sg-canvas sg-modifier">
<span class="sg-modifier-name">.disabled</span>
<div style="">
<i class="icon-checkbox disabled"></i>
<i class="icon-checkbox-bright disabled"></i>
<i class="icon-star-empty disabled"></i>
</div>
</div>
<div class="align-left bg-light sg-canvas sg-modifier">
<span class="sg-modifier-name">.active</span>
<div style="">
<i class="icon-checkbox active"></i>
<i class="icon-checkbox-bright active"></i>
<i class="icon-star-empty active"></i>
</div>
</div>
</div>
</section>
<section class="sg-example" id="6.6">
<h3>
<a href="#6.6">6.6</a>
</h3>
<div class="sg-description">
<span class="sg-filename">_icons.scss</span>
<h2>Header Nav Icons <code>.icon-</code></h2>
<ul class="sg-modifiers">
<li>
<strong>.dark</strong>
-
Midtone variation
</li>
</ul>
</div>
<div class="sg-canvases">
<div class="align-left bg-light sg-canvas">
<div style="">
<i class="icon-nav-help"></i>
<i class="icon-nav-search"></i>
</div>
</div>
<div class="align-left bg-light sg-canvas sg-modifier">
<span class="sg-modifier-name">.dark</span>
<div style="">
<i class="icon-nav-help dark"></i>
<i class="icon-nav-search dark"></i>
</div>
</div>
</div>
</section>
<section class="sg-example" id="6.7">
<h3>
<a href="#6.6">6.7</a>
</h3>
<div class="sg-description">
<span class="sg-filename">_icons.scss</span>
<h2>Mini icons <code>.icon-</code></h2>
<p>Destined to live within only tag cloud buttons, mini icons are small variations on some of the above icons that need to use another character and grid size to be perfectly crips.</p>
</div>
<div class="sg-canvases">
<div class="align-left bg-light sg-canvas">
<div style="">
<i class="icon-group-mini"></i>
<i class="icon-user-mini"></i>
<i class="icon-tag-mini"></i>
</div>
</div>
</div>
</section>
</section>
<section class="sg-example" id="6.8">
<h3>
<a href="#6.8">6.8</a>
</h3>
<div class="sg-description">
<span class="sg-filename">_icons.scss</span>
<h2>
"Content Type" Icons in Page Headers
</h2>
<p>Icons are used in Page Headers to indicate the type of content presented.
Below is a list of all such pages and their corresponding icons.
</p>
</div>
<div class="sg-canvases">
<div class="align-left bg-light sg-canvas">
<div style="">
<div class="ui-body-title">
<div class="ui-body-title-label">
<h1 class="title-xl">
<i class="icon-media-entry"></i> Title of an Entry
</h1>
</div>
</div>
</div>
</div>
<div class="align-left bg-light sg-canvas">
<div style="">
<div class="ui-body-title">
<div class="ui-body-title-label">
<h1 class="title-xl">
<i class="icon-set"></i> Title of a Set
</h1>
</div>
</div>
</div>
</div>
<div class="align-left bg-light sg-canvas">
<div style="">
<div class="ui-body-title">
<div class="ui-body-title-label">
<h1 class="title-xl">
<i class="icon-filter-set"></i> Title of a Filter-Set
</h1>
</div>
</div>
</div>
</div>
<div class="align-left bg-light sg-canvas">
<div style="">
<div class="ui-body-title">
<div class="ui-body-title-label">
<h1 class="title-xl">
<i class="icon-home"></i> Mein Archiv
</h1>
</div>
</div>
</div>
</div>
<div class="align-left bg-light sg-canvas">
<div style="">
<div class="ui-body-title">
<div class="ui-body-title-label">
<h1 class="title-xl">
<i class="icon-privacy-private-alt"></i> Inhalte, für die ich verantwortlich bin
</h1>
</div>
</div>
</div>
</div>
<div class="align-left bg-light sg-canvas">
<div style="">
<div class="ui-body-title">
<div class="ui-body-title-label">
<h1 class="title-xl">
<i class="icon-upload"></i> Meine letzten Importe
</h1>
</div>
</div>
</div>
</div>
<div class="align-left bg-light sg-canvas">
<div style="">
<div class="ui-body-title">
<div class="ui-body-title-label">
<h1 class="title-xl">
<i class="icon-star"></i> Meine Favoriten
</h1>
</div>
</div>
</div>
</div>
<div class="align-left bg-light sg-canvas">
<div style="">
<div class="ui-body-title">
<div class="ui-body-title-label">
<h1 class="title-xl">
<i class="icon-tag"></i> Meine Schlagworte
</h1>
</div>
</div>
</div>
</div>
<div class="align-left bg-light sg-canvas">
<div style="">
<div class="ui-body-title">
<div class="ui-body-title-label">
<h1 class="title-xl">
<i class="icon-privacy-group-alt"></i> Mir anvertraute Inhalte
</h1>
</div>
</div>
</div>
</div>
<div class="align-left bg-light sg-canvas">
<div style="">
<div class="ui-body-title">
<div class="ui-body-title-label">
<h1 class="title-xl">
<i class="icon-privacy-group"></i> Meine Arbeitsgruppen
</h1>
</div>
</div>
</div>
</div>
<div class="align-left bg-light sg-canvas">
<div style="">
<div class="ui-body-title">
<div class="ui-body-title-label">
<h1 class="title-xl">
<i class="icon-tags"></i> Vokabulare
</h1>
</div>
</div>
</div>
</div>
<div class="align-left bg-light sg-canvas">
<div style="">
<div class="ui-body-title">
<div class="ui-body-title-label">
<h1 class="title-xl">
<i class="icon-catalog"></i> Erkunden
</h1>
</div>
</div>
</div>
</div>
<div class="align-left bg-light sg-canvas">
<div style="">
<div class="ui-body-title">
<div class="ui-body-title-label">
<h1 class="title-xl">
<i class="icon-catalog"></i> Erkunden / Katalog
</h1>
</div>
</div>
</div>
</div>
<div class="align-left bg-light sg-canvas">
<div style="">
<div class="ui-body-title">
<div class="ui-body-title-label">
<h1 class="title-xl">
<i class="icon-set"></i> Erkunden / Beispielhafte-Sets
</h1>
</div>
</div>
</div>
</div>
<div class="align-left bg-light sg-canvas">
<div style="">
<div class="ui-body-title">
<div class="ui-body-title-label">
<h1 class="title-xl">
<i class="icon-tag"></i> Erkunden / Häufige Schlagworte
</h1>
</div>
</div>
</div>
</div>
<div class="align-left bg-light sg-canvas">
<div style="">
<div class="ui-body-title">
<div class="ui-body-title-label">
<h1 class="title-xl">
<i class="icon-lens"></i> Suche
</h1>
</div>
</div>
</div>
</div>
<div class="align-left bg-light sg-canvas">
<div style="">
<div class="ui-body-title">
<div class="ui-body-title-label">
<h1 class="title-xl">
<i class="icon-library"></i> Medienarchiv
</h1>
</div>
</div>
</div>
</div>
<div class="align-left bg-light sg-canvas">
<div style="">
<div class="ui-body-title">
<div class="ui-body-title-label">
<h1 class="title-xl">
<i class="icon-pen"></i> Metadaten editieren
</h1>
</div>
</div>
</div>
</div>
<div class="align-left bg-light sg-canvas">
<div style="">
<div class="ui-body-title">
<div class="ui-body-title-label">
<h1 class="title-xl">
<i class="icon-lock"></i> Berechtigungen von "Foobar"
</h1>
</div>
</div>
</div>
</div>
<div class="align-left bg-light sg-canvas">
<div style="">
<div class="ui-body-title">
<div class="ui-body-title-label">
<h1 class="title-xl">
<i class="icon-link"></i> Adressen für "Foobar"
</h1>
</div>
</div>
</div>
</div>
<div class="align-left bg-light sg-canvas">
<div style="">
<div class="ui-body-title">
<div class="ui-body-title-label">
<h1 class="title-xl">
<i class="icon-vis-graph"></i> Visualisiertes Set
</h1>
</div>
</div>
</div>
</div>
<div class="align-left bg-light sg-canvas">
<div style="">
<div class="ui-body-title">
<div class="ui-body-title-label">
<h1 class="title-xl">
<i class="icon-eye"></i> Nach vergleichbaren Inhalten stöbern
</h1>
</div>
</div>
</div>
</div>
<div class="align-left bg-light sg-canvas">
<div style="">
<div class="ui-body-title">
<div class="ui-body-title-label">
<h1 class="title-xl">
<i class="icon-upload"></i> Import Media
</h1>
</div>
</div>
</div>
</div>
</div>
</section>
<br>
<section class="sg-body">
<div class="sg-intro">
<h2 class="sg-intro-title">Extending Madek Icon Font</h2>
<p>Icons rely on an icon font located in the <code>assets/fonts/madek-icon-font</code> folder. Madek Icon Font has been built using <a href="http://icomoon.io">IcoMoon App</a>. In order to extend the font with additional icons (characters) please follow the guidelines:</p>
<ol>
<li>Launch IcoMoon font creator app located on this <a href="http://icomoon.io/app/">URL</a> at the time of writing these instructions.
</li>
<li>Create a New Project from the top left menu.
<figure class="sg-figure"><img src="/assets/styleguide/icomoon1.png"></figure>
</li>
<li>Import Icons from <code>selection.json</code> file located in the above mentioned folder.
<figure class="sg-figure"><img src="/assets/styleguide/icomoon2.png"></li></figure>
<li>Import <code>.svg</code> file containing your new icon. Ideal measurements of a that SVG item to use are: 512px × 512px. Icon graphics look sharpest and will scale best when they are overlaid on and its edges align to a 16 × 16 module grid system.
<figure class="sg-figure"><img src="/assets/styleguide/icomoon3.png"></figure>
</li>
<li>Once your new icon is loaded to the set, select it by using the <strong>Selection</strong> tool accessible from the top menu.
<figure class="sg-figure"><img src="/assets/styleguide/icomoon4.png"></figure>
</li>
<li>Move to the <strong>Font</strong> screen accessible from the bottom menu.
<figure class="sg-figure"><img src="/assets/styleguide/icomoon6.png"></figure>
</li>
<li>Hit <strong>Preferences</strong> button and set: Font Name to <code>madek-icon-font</code>, Class Prefix to <code>icon-</code> and check 'Encode and Embed Font in CSS' option.
<figure class="sg-figure"><img src="/assets/styleguide/icomoon6.png"></figure>
</li>
<li>Next to the newly added icon, specify class suffixes that it will be called by (i.e. <code>user</code> to create <code>.icon-user</code> selector).
<figure class="sg-figure"><img src="/assets/styleguide/icomoon7.png"></figure>
</li>
<li>Download the package.
<figure class="sg-figure"><img src="/assets/styleguide/icomoon8.png"></figure>
</li>
<li>Replace all files in the madek-icon-font folder with the contents of the downloaded package.
</li>
<li>Document your new icon character in this section of the styleguide.</li>
</ol>
</div>
</section>