Icons
Weavr includes a custom set of icons. You can use icon classes to quickly add an icon to an element via the :before pseudo-class. Icon classes start with .icon- followed by the name of the icon. Below are all the available icons with their icon class and unicode value:
Symbols
.icon-menu
Unicode: \e616
.icon-mail
Unicode: \e615
.icon-plus
Unicode: \e613
.icon-cross
Unicode: \e608
.icon-checkmark
Unicode: \e607
.icon-play
Unicode: \e60a
.icon-user
Unicode: \e609
.icon-location
Unicode: \e61b
.icon-resize-enlarge
Unicode: \e61d
.icon-search
Unicode: \e61f
.icon-credit-card
Unicode: \e802
.icon-phone
Unicode: \e800
.icon-cart
Unicode: \e801
.icon-dollar-sign
Unicode: \e803
Arrows
.icon-arrow-left
Unicode: \e60d
.icon-arrow-right
Unicode: \e60c
.icon-arrow-up
Unicode: \e60b
.icon-arrow-down
Unicode: \e612
.icon-arrow-left-small
Unicode: \e60e
.icon-arrow-right-small
Unicode: \e612
.icon-arrow-up-small
Unicode: \e611
.icon-arrow-down-small
Unicode: \e610
.icon-nub-left
Unicode: \e61a
.icon-nub-right
Unicode: \e619
.icon-nub-up
Unicode: \e618
.icon-nub-down
Unicode: \e617
Social Media
.icon-facebook
Unicode: \e601
.icon-vimeo
Unicode: \e606
.icon-twitter
Unicode: \e600
.icon-pinterest
Unicode: \e603
.icon-addthis
Unicode: \e614
.icon-tumblr
Unicode: \e604
.icon-linkedin
Unicode: \e605
.icon-googleplus
Unicode: \e602
.icon-instagram
Unicode: \e61c
.icon-youtube
Unicode: \e61e
These classes place the icon in a :before pseudo-element, so you can technically add the class to any element that supports :before. Note that this means icon classes will not do anything on inputs or image tags.
If you need to place a standalone icon (i.e. you’re not prepending the icon to an element that already contains content), use the i element:
<i class="icon-cart"></i>
NOTE: At the moment, Weavr is using an icon font for its icon system. This makes it easy to add, color, and scale the icons with good cross-browser support, but it comes with its drawbacks. There's a growing movement to use SVG instead, and Weavr should eventually move that direction as well, but we're not ready yet.