Icons

Tyfy only needs a handful of icons. I've included a dozen or so common icons as a custom web font. Node.js and the webfont package are used to convert a set of .svg icons into an icon webfont called tyicons. Tyicons is subset of custom icons created by Aaron Pinero.

Do I Need This Font?

The tyicons font is not required. If you want to use a different icon font, simply customize icon character code variables in the settings module using character code values for your preferred font. Icons are used in styles for:

• lists
  • $tyicons-angle-right
  • $tyicons-dash
  • $tyicons-check
• blockquotes
  • $tyicons-quote-right
• collapsables
  • $tyicons-angle-up
• tabs
  • $tyicons-angle-up

If you are not planning to use those modules, Tyfy will not need icons and the character code variables can be ignored.

Using Icons in SCSS

Because of an issue with SASS, the icon font character codes are stored in the settings module without their preceding slash.

To properly apply the character codes in the CSS content property, Tyfy has a custom function named tychar that accepts a character code variable and returns the correct character code string.

$tyicons-angle-up: "ea04" !default;
  			
.tyicons-angle-up::before {
  content: tychar($tyicons-angle-up);
}

Using Icons in HTML

The icons module includes classes for adding icons within the html. Those classes are employed in the following table.