Krita Icon Font
     

This Icon Font is made with the awesome new iconset designed for Krita. The original Idea behind this work was to create useful tools for people writing Tutorials e.g. about krita. The iconset includes some handy css styles, making it easy to use it in a broad variety. I have adjusted the kbd (html-tag) to emphasize the use of shortcuts in a tutorial and to fit to the available extra-themes.

Example: Alt + Ctrl + B

In addition to the basic tools and themes you can use the icons for tooltips popping up over the keyword of your choice.

<a class="ki-tooltip kicon-visible"></a>
The tooltips are based on css3-transforms and might not work as expected in older browsers.

Note: I have only created the "framework" for these truly nice Icons - the design was done by Angel Antondo!

Usage

  1. Download the Files (Fonts & CSS)
  2. Load the Icon Font in the Head Section of your Website
    3. <link href="path-to/css/krita-icons.min.css" rel="stylesheet">
  3. Use the Icons with the Class-Selector: kicon-iconname
  4. [Optional] Add theme or size classes (see sections below for available styles)

Basic Icons

<span class="kicon-crop"></span>
                                                                                                               

Medium Size

<span class="kicon-md kicon-multibrush"></span>
                                                                                                               

Large Size

<span class="kicon-lg kicon-duplicate"></span>
                                                                                                               

Extra Large Size

<span class="kicon-xl kicon-transform"></span>
                                                                                                               

Theme Dark

<span class="theme-dark kicon-locked"></span>

Theme Light

<span class="theme-light kicon-symmetry-horizontal"></span>

Tooltips

<a href="#" class="ki-tooltip kicon-ruler"></a>
 select |  text |  pattern |  calligraphy |  format-fill-color |  freehand |  linetool |  square |  circle |  poly |  polyline |  drawpath |  freehand-vector |  dyna |  multibrush |  crop |  move |  transform |  measure |  fill |  colorpicker |  ruler |  perspective |  grid |  select-square |  select-circle |  select-brush |  select-poly |  select-freehand |  select-contiguous |  select-color |  select-path |  pan |  zoom |  new-file |  print |  save |  add-layer |  duplicate |  move-down |  move-up |  move-out |  move-in |  properties |  delete |  visible |  invisible |  unlocked |  locked |  alpha |  menu |  plus |  minus |  add-palette |  symmetry-horizontal |  symmetry-vertical |

Grouping Icons

<div class="icon-group">
  <span class="theme-light kicon-freehand"></span>
  <span class="highlight-icon theme-light kicon-linetool"></span>
  <span class="theme-light kicon-square"></span>
  <span class="theme-light kicon-circle"></span>
</div>

Lorem ipsum dolor sit. Fermentum pellentesque nonummy erat in purus platea mollis. Ornare duis, lectus dapibus arcu at erat curae, ac semper in nibh faucibus velit. Eget tellus orci, id duis placerat justo consequat condimentum. Sagittis tortor, montes porta sodales iaculis tempor malesuada donec. 

<div class="icon-group">
  <span class="theme-dark kicon-freehand"></span>
  <span class="highlight-icon theme-dark kicon-linetool"></span>
  <span class="theme-dark kicon-square"></span>
  <span class="theme-dark kicon-circle"></span>
</div>

Lorem ipsum dolor sit. Fermentum pellentesque nonummy erat in purus platea mollis. Ornare duis, lectus dapibus arcu at erat curae, ac semper in nibh faucibus velit. Eget tellus orci, id duis placerat justo consequat condimentum. Sagittis tortor, montes porta sodales iaculis tempor malesuada donec. 

<div class="icon-group-horizontal">
  <span class="theme-dark kicon-freehand"></span>
  <span class="highlight-icon theme-dark kicon-linetool"></span>
  <span class="theme-dark kicon-square"></span>
  <span class="theme-dark kicon-circle"></span>
</div>

Lorem ipsum dolor sit. Fermentum pellentesque nonummy erat in purus platea mollis. Ornare duis, lectus dapibus arcu at erat curae, ac semper in nibh faucibus velit. Eget tellus orci, id duis placerat justo consequat condimentum. Sagittis tortor, montes porta sodales iaculis tempor malesuada donec. 

<div class="icon-group-horizontal">
  <span class="theme-light kicon-freehand"></span>
  <span class="highlight-icon theme-light kicon-linetool"></span>
  <span class="theme-light kicon-square"></span>
  <span class="theme-light kicon-circle"></span>
</div>

Lorem ipsum dolor sit. Fermentum pellentesque nonummy erat in purus platea mollis. Ornare duis, lectus dapibus arcu at erat curae, ac semper in nibh faucibus velit. Eget tellus orci, id duis placerat justo consequat condimentum. Sagittis tortor, montes porta sodales iaculis tempor malesuada donec.