fonts.html

---
layout: default
title: Fonts and symbols
---

<div class="row">
  <div class="col12">
    <h1>Fonts and symbols</h1>
    <h2>Fonts</h1>
      <p>In this lib are included:</p>
      <p>OpenSans</p>
      <h5>MuseoSans</h5>

      <h2>Symbols</h2>
      {% highlight html %}
      <span class="icon"> c </span>
      {% endhighlight %}
      <br>
      <p>This code will become as symbol:</p>
      <p><span class="icon big"> c </span></p>
      <h4>Other icons</h4>
      <p>Each icon has own letter</p>
      <div class="row">
        <div class="col3">
          <p><span class="icon big">  </span></p>
          <p><span class="icon big"> C </span></p>
          <p><span class="icon big"> D </span></p>
          <p><span class="icon big"> M </span></p>
          <p><span class="icon big"> E </span></p>
        </div>
        <div class="col3">
          <p><span class="icon big"> I </span></p>
          <p><span class="icon big"> T </span></p>
          <p><span class="icon big"> J </span></p>
          <p><span class="icon big"> N </span></p>
          <p><span class="icon big"> Y </span></p>
        </div>
        <div class="col3">
          <p><span class="icon bigger"> m </span></p>
          <p><span class="icon bigger"> K </span></p>
          <p><span class="icon bigger"> s </span></p>
        </div>
        <div class="col12 padx-0">
          <a class="btn" href="{{ '/' | relative_url }}icon/">All icons</a>
        </div>
      </div>


      <h2>Syntax highlighter</h2>
      <p>You can use syntax highlighter which is included in jekyll template
        language (liquid). Styling is also included in this library. For usage
        you can use use liquid's macro
        <code>&#123;% highlight html %&#125;&#123;% endhighlight %&#125;</code></p>
  </div>
</div>
<div class="row">
    <h2>Link with icon in circle in the middle</h2>
    <p>Choose your icon with icons attribute</p>
    {% highlight html %}
    <!-- with image  -->
    <div class="col5">
      <a class="circled-icon" icons="]" href="#search">
        <img class="width-100" src="https://www.maptiler.com/press/mediakit/thumbnails/video-5.jpg" alt="Boston">
      </a>
    </div>

    <!-- with empty box  -->
    <div class="col5">
      <a class="circled-icon" icons="W" href="#download">
        <div class="box width-100">
        </div>
      </a>
    </div>
    {% endhighlight %}
  </div>
  <div class="col5">
    <a class="circled-icon" icons="]" href="https://www.maptiler.com/press/">
      <img class="width-100" src="https://www.maptiler.com/press/mediakit/thumbnails/video-5.jpg" alt="Boston">
    </a>
  </div>
<div class="offset1 col5">
  <a class="circled-icon" icons="W" href="#download">
    <div class="shadow3 width-100 pady-10">
    </div>
  </a>
</div>