Get Started with Fontisto

fontisto browser addon
Get started with Fontisto Fontisto for designers and developers. There are many ways to use symbols. On your website or at your favorite frames (photoshop, illustrator, xd, sketchapp, zeplin, invision studio, framer ...)
Web Fonts with CSS The classic way of using Fontisto icons - great for die hards and older browsers
Desktop Use Easily place icons in your design work and documents using ligatures and vectors COMING SOON
SVG with JS Modern, easy and powerful with new features and the most backwards compatiblity COMING SOON
Advanced Options Here be sprites, package manager options, preprocessors, APIs, and dragons COMING SOON

Use Fonfisto Free CDN

The folks at jsdelivr host the compressed Fontisto CSS for us. Just drop of these tag into your HTML and you're set
icon and version selection
  • fontisto
  • Brands
  • Editors
  • Weather
  • Emoji
  • Player
  • Travel
  • Medical
  • Version: 3.0.4
  • Version: 3.0.3
  • Version: 3.0.2
  • Version: 3.0.1
  • Version: 2.0.1
  • Version: 2.0.0
  • Version: 1.9.1
  • Version: 1.3.1
  • Version: 1.2.1
    copy
    
<link rel=“stylesheet” href=“https://cdn.jsdelivr.net/npm/[email protected]/css/fontisto/fontisto.min.css”></i>
<link rel=“stylesheet” href=“https://cdn.jsdelivr.net/npm/[email protected]/css/fontisto/fontisto.min.css”></i>
<link rel=“stylesheet” href=“https://cdn.jsdelivr.net/npm/[email protected]/css/fontisto/fontisto.min.css”></i>
<link rel=“stylesheet” href=“https://cdn.jsdelivr.net/npm/[email protected]/css/fontisto/fontisto.min.css”></i>
<link rel=“stylesheet” href=“https://cdn.jsdelivr.net/npm/[email protected]/css/fontisto/fontisto.min.css”></i>
<link rel=“stylesheet” href=“https://cdn.jsdelivr.net/npm/[email protected]/css/fontisto/fontisto.min.css”></i>
<link rel=“stylesheet” href=“https://cdn.jsdelivr.net/npm/[email protected]/css/fontisto/fontisto.min.css”></i>
<link rel=“stylesheet” href=“https://cdn.jsdelivr.net/npm/[email protected]/css/fontisto/fontisto.min.css”></i>
<link rel=“stylesheet” href=“https://cdn.jsdelivr.net/npm/[email protected]/css/fontisto/fontisto.min.css”></i>

Using CSS

1. Copy the entire fontisto directory into your project.
2. In the <head> of your html, reference the location to your fontisto.min.css
3. Check out the examples to start using Fontisto! 
     index.html
    copy

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <!-- fontisto css -->
        <link href="fontisto/css/fontisto.min.css" rel="stylesheet">
    </head>
    <body>
        <i class="fi fi-facebook"><i>
        <i class="fi fi-twitter"><i>
        <i class="fi fi-instagram"><i>
    </body>
</html>
CSS Preprocessors (Sass, Less, Stylus) Compile Fontisto font with your own asset pipeline by downloading our source Sass/Less/Stylus, and documentation files. This option requires some additional tooling
  • 1. Copy the fontisto/ directory into your project.
  • 2. Open your project’s variables and edit the $fi-font-path variable to point to your font directory.
  • 3. Re-compile your Sass if using a static compiler. Otherwise, you should be good to go.
  • 4. Check out the examples to start using Fontisto!
  • Sass ( css preprocessor ) v3.0.4
      • Sass
        • Fontisto
          • fontisto.sass
          • _variables.sass
          • _color.sass
          • _font.sass
          • _icons.sass
          • _animated.sass
          • _list.sass
          • _bordered.sass
          • _rotated.sass
          • _stacked.sass
          • _fixed-width.sass
          • _screen-readers.sass
    SASS
  • Less ( css preprocessor ) v3.0.4
      • Less
        • Fontisto
          • fontisto.less
          • variables.less
          • color.less
          • font.less
          • icons.less
          • animated.less
          • list.less
          • bordered.less
          • rotated.less
          • stacked.less
          • fixed-width.less
          • screen-readers.less
    LESS
  • Stylus ( css preprocessor ) v3.0.4
      • Stylus
        • Fontisto
          • fontisto.styl
          • variables.styl
          • color.styl
          • font.styl
          • icons.styl
          • animated.styl
          • list.styl
          • bordered.styl
          • rotated.styl
          • stacked.styl
          • fixed-width.styl
          • screen-readers.styl
    STYLUS
Advanced & Packages You can use Fontisto with the package managers that are right for you.
  • Npm package install fontisto in your Node powered apps with the npm package v3.0.4
    • $ npm install fontisto
    Npm
  • Yarn package Install and manage fontisto using yarn package v3.0.4
    • $ yarn add fontisto
    Yarn
  • bower package Install and manage fontisto using bower package v3.0.4
    • $ bower install fontisto
    bower
  • composer package Install and manage fontisto using composer package v3.0.4
    • $ composer require kenangundogan/fontisto
    composer
  • meteor package Install and manage fontisto using meteor package v3.0.4
    • $ meteor add kenangundogan:fontisto
    meteor
  • github package download fontisto github v3.0.4
    • github.com/kenangundogan/fontisto.git
    github