CSS

JS

Glyphs

Collection of icons and typographic symbols.

Usage

All Garden glyphs are bundled together into a Web Open Font Format file, located at dist/fonts.

The .glyph class is responsible for setting the font-family name, along with a couple of resetting properties.
The classes for specific glyphs should be prefixed with glyph and then followed by the glyph identifier, as shown in the example below for the cart icon.

  <div class="glyph glyph-cart"></div>

Below is a relation of glyphs currently available. You can click on any of them to automatically copy their identifiers.

arrow-left
arrow-right
calendar
camera
cart
chat-balloon
checked
clock
clone
dollar-sign
double-arrow-left
double-arrow-right
double-arrow-up
double-arrow-down
envelope
exclamation-mark
external
eye
heart
location
lock
magnifier
order
pencil
printer
projects
question-mark
refresh
signout
silhouette
settings
trash-can
tag
tools
unlock
verified price
x

Customized bundle

Garden gathers all the SVG icons under src/glyphs and uses gulp-iconfont to create the font file. With that, a PostCSS function is used to generate the CSS file for that font. Due to this process flow, you can easily customize your bundle by adding or removing glyphs on that folder.