Copy Glyph

Font Kiko presents more than 1500 Open Source icons, ideal for any project. Enhance your work with HiSlide.io, our other project offering free templates for PowerPoint, Google Slides, and Keynote. Remember to support Font Kiko by citing us on social media and websites. Thank you!

Current version: Version 1.0.8, December 2019

Documents

Getting Started on the Desktop

Getting Started on the Web

 

Getting Started on the Desktop

How to install font Kiko on the computer?

You can install font Kiko on your PC or a laptop and use it as an ordinary font in your programs. For instance, it is possible to use font Kiko in MS Office Word, Excel, PowerPoint, Photoshop, Illustrator, Keynote, Pages, and any other packs.

Kiko is easily installed on any PC and work on any operating system as a standard font. Download the archive of font Kiko clicking on the link in the header of the site. There, you will find the files with extensions .OTF и .TTF. You will need these files for the font installation on your PC. Kiko includes several types of fonts: «Light», «Regular» and «Solid». Do not forget to install all the necessary types.

 

Font Kiko installation on PCs with Windows operating system

Option №1:

Double-click on the font file with extensions .TTF or .OTF. Wait until the font preview window will be opened. Next, click on the "Install" button. The font is installed.

Option №2:

Open the Windows folder (the usual path is C:/). Find and open the “Fonts” folder. Copy the .TTF or .OTF fonts into the “Fonts” folder.

Option №3:

Go to the "Dashboard"> "Fonts". Click on the menu "File"> "Install Fonts”. In the opened menu, look for the font and install it.

Attention: In some Windows versions, it is necessary to restart those programs in which you plan to use the font in the future. Some Windows versions require a full reboot.

 

Font Kiko installation on PCs with MAC operating system

Double-click on the font file with extensions .TTF or .OTF. Wait until the font preview window will be opened. Next, click on the "Install the font" button. The font is installed.

Attention: In some MAC versions, it is necessary to restart those programs in which you plan to use the font in the future. Some MAC versions require a full reboot.

 

Getting Started on the Web

Using CSS

Step #1: Copy the entire fontkiko directory into your project.

Step #2: In the <head> of your html, reference the location to your kiko-all.min.css. or kiko-all.css.

<link rel="stylesheet" href="path/to/fontkiko/css/kiko-all.min.css">
<link rel="stylesheet" href="path/to/fontkiko/css/kiko-all.css">

 

Using Sass or Less

Step #1: Copy the fontkiko directory into your project.

Step #2: Find your project's fontkiko/less/kiko-all.less  or  fontkiko/scss/kiko-all.scss  and include them to your main .less or .scss files  as @import “path/to/fontkiko/less/kiko-all.less” or @import “path/to/fontkiko/scss/kiko-all.scss”

Step #3: Re-compile your Less or Sass if using a static compiler. Otherwise, you should be good to go.

 

Packages

Also you can add fontkiko to your project with npm,  just add npm install fontkiko to cmd panel. It will appear in folder node_modules and you can hook up .css, .less or .scss files

Basic Use

You can place Font Kiko icons just about anywhere using a style prefix and the icon’s name. We’ve tried to make it so that icons will take on the characteristics and appear alongside text naturally.

Font Kiko is designed to be used with inline elements and we recommend sticking with a consistent HTML element to reference them by in your project. We recommend to use tag <span> it is more semantically correct.

For example:

<span class="kikor kiko-train"></span>
<span class="kikol kiko-train"></span>
<span class="kikos kiko-train"></span>

There are kikor - type of font (Kiko Regular);

kikol - type of font (Kiko Light);

kikos - type of font (Kiko Solid);

kiko-train - name of icon;

Style @font-face weight Style class

Example

Rendering

Light 300 kikol <span class="kikol kiko-train"></span>
Regular 400 kikor <span class="kikor kiko-train"></span>
Solid 600 kikos <span class="kikos kiko-train"></span>

 

Font Kiko Icons + Your Project’s Styling

Font Kiko icons automatically inherit CSS size and color.

<head>

  <title>Font Kiko</title>

  <link rel="stylesheet" href="css/kiko-all.css">

</head>

<body>

  <p style="font-size: 30px; color: blue;">

      <span class="kikor kiko-train"></span>

  </p>

  <p style="font-size: 30px; color:chocolate;">

      <span class="kikol kiko-truck"></span>

  </p>

  <p style="font-size: 30px; color:brown">

      <span class="kikos kiko-bus"></span>

  </p>  

</body>

 

Additional Styling Options

Also with Font Kiko you can make custom styles for every icon you need:

<head>

  <title>Font Kiko</title>

  <link rel="stylesheet" href="css/kiko-all.css">

</head>

<body>

  <!-- custom styling for all icons -->

  <style>

      span.kikor,

      span.kikos,

      span.kikol {

          font-size: 30px;

          color: aqua;

      }

  </style>




   <!-- custom styling for all icons -->

  <style>

      .kiko-train {

          color: brown;

      }

      .kiko-truck {

          transform: rotate(90deg);

      }

      .kiko-bus {

          opacity: 0.7;

      }

  </style>

      <span class="kikor kiko-train"></span>

      <span class="kikol kiko-truck"></span>

      <span class="kikos kiko-bus"></span>

</body>

Email Subscription

Subscribe to our newsletter and we will notify you about the update of Kiko font. We guarantee you that we will not write without need and give your contacts to third parties. We do not like spam just like you. Thank you for your trust!

You can also follow us on social networks to learn about the update of Kiko font