Documents
Getting Started on the Desktop
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>