Symbols

Symbols are built through gulp-iconfont, and the build process generates:

• Multiple font formats under /assets/fonts/symbols/
• Sass file found inside /utils/symbols.scss
• HTML file preview of your icons under /assets/fonts/symbols/
• Mixins and %placeholder to use in your Sass

---

Sample Sass

The generated sass will contain:

• @font-face
• %placeholder
• @mixin symbols()
• List of classes to use in markup

//=================================
// SYMBOLS
//=================================

@font-face {
  font-family: "symbols";
  src: url('assets/fonts/symbols/symbols.eot');
  src: url('assets/fonts/symbols/symbols.eot?#iefix') format('eot'),
    url('assets/fonts/symbols/symbols.woff') format('woff'),
    url('assets/fonts/symbols/symbols.ttf') format('truetype'),
    url('assets/fonts/symbols/symbols.svg#symbols') format('svg');
  font-weight: normal;
  font-style: normal;
}

// Symbols placeholder to extend inside the mixin.
%symbols {
  font-family: "symbols";
  width: 1em;
  margin: 0;
  font-style: normal;
  font-weight: normal;
  font-variant: normal;
  text-align: center;
  text-decoration: inherit;
  text-transform: none;
  line-height: 1em;
  speak: none;
}

// Styles applied to the .symbol class when adding symbols to the markup.
.symbol:before {
  font-family: "symbols";
  width: 1em;
  margin: 0;
  font-style: normal;
  font-weight: normal;
  font-variant: normal;
  text-align: center;
  text-decoration: inherit;
  text-transform: none;
  line-height: 1em;
  speak: none;
}

// Mixin to add in your own symbol through the css.
// The mixin only works with :pseudo
@mixin symbols($symbol: false) {
  @extend %symbols;

  @if $symbol == "symbol-icon" {
    content: '\E001';
  }
}

// Individual CSS styles for when you call by the class name in markup.
.s-symbol-icon:before { content: "\E001" }

Example Usage

.class:before {
  @include symbols(symbol-name);
}

.class:before {
  @include symbols(symbol-name);
  @include mq(large) {
    @include symbols(symbol-other-name);
  }
}

<i class="symbol s-symbol-name"></>

Please note that you must follow the following when using sprites:

• It must be a :pseudo element, either :before or :after will work.
• The @include symbols() mixin uses the name of your SVG asset.

Creating SVG Assets

• All SVG assets must be 500x500 points, or at least be consistent across the board.
• All SVG assets must be saved to _src/symbols/. The name you choose, will be the one you use throughout the app.
• For additional reading, read on how to convert AI to SVG
• Additional tips -- https://www.npmjs.com/package/gulp-iconfont#preparing-svg-s

General Tips

Inkscape

Degroup every shapes (Ctrl+Shift+G), convert to pathes (Ctrl+Maj+C) and merge them (Ctrl++). Then save you SVG, prefer 'simple SVG' file type.

Illustrator

Save your file as SVG with the following settings:

• SVG Profiles: SVG 1.1
• Fonts Type: SVG
• Fonts Subsetting: None
• Options Image Location: Embed
• Advanced Options [CSS Properties: Presentation Attributes / Decimal Places: 1 / Encoding: UTF-8 / Output fewer elements: check]