Gwikons (Icons)

Groundwork comes with its own special font called «Noceda Font Pro». Aside from being a light, elegant and open sans-serif font that can give a modern feel to your sites, it also has Gwikons.

304 Gwikons at your disposal

Gwikons are custom icon sets that are stored in «Noceda Font Pro». 1 line of LESSCSS is all you need to have them…. and since they are font glyphs, you can style them anyway you want like you would with normal text.

.gwikon-groundwork();

.gwikon-drupal();

Social Icons

.gwikon-facebook();

.gwikon-twitter();

.gwikon-googleplus();

.gwikon-linkedin();

.gwikon-instagram();

.gwikon-pinterest();

.gwikon-youtube();

.gwikon-vimeo();

.gwikon-behance();

.gwikon-blogger();

.gwikon-delicious();

.gwikon-deviantart();

.gwikon-digg();

.gwikon-dribbble();

.gwikon-flickr();

.gwikon-foursquare();

.gwikon-friendfeed();

.gwikon-github();

.gwikon-lastfm();

.gwikon-myspace();

.gwikon-path();

.gwikon-picasa();

.gwikon-reddit();

.gwikon-skype();

.gwikon-slideshare();

.gwikon-soundcloud();

.gwikon-spotify();

.gwikon-stackoverflow();

.gwikon-stumbleupon();

.gwikon-tumblr();

.gwikon-vkontakte();

General Use Icons

.gwikon-w3c();

.gwikon-git();

.gwikon-css();

.gwikon-cc();

.gwikon-address-book();

.gwikon-address-book-alt();

.gwikon-adjust();

.gwikon-adjust-alt();

.gwikon-adult();

.gwikon-airplane();

.gwikon-align-center();

.gwikon-align-justify();

.gwikon-align-left();

.gwikon-align-right();

.gwikon-arrow-down();

.gwikon-arrow-left();

.gwikon-arrow-right();

.gwikon-arrow-up();

.gwikon-asl();

.gwikon-asterisk();

.gwikon-backward();

.gwikon-ban-circle();

.gwikon-barcode();

.gwikon-basket();

.gwikon-basket-alt();

.gwikon-bell();

.gwikon-bold();

.gwikon-book();

.gwikon-bookmark();

.gwikon-bookmark-empty();

.gwikon-braille();

.gwikon-briefcase();

.gwikon-broom();

.gwikon-brush();

.gwikon-bulb();

.gwikon-bullhorn();

.gwikon-calendar();

.gwikon-calendar-sign();

.gwikon-camera();

.gwikon-car();

.gwikon-caret-down();

.gwikon-caret-left();

.gwikon-caret-right();

.gwikon-caret-up();

.gwikon-certificate();

.gwikon-check();

.gwikon-check-empty();

.gwikon-chevron-down();

.gwikon-chevron-left();

.gwikon-chevron-right();

.gwikon-chevron-up();

.gwikon-child();

.gwikon-circle-arrow-down();

.gwikon-circle-arrow-left();

.gwikon-circle-arrow-right();

.gwikon-circle-arrow-up();

.gwikon-cloud();

.gwikon-cloud-alt();

.gwikon-code();

.gwikon-code-alt();

.gwikon-cog();

.gwikon-cog-alt();

.gwikon-cogs();

.gwikon-comment();

.gwikon-comment-alt();

.gwikon-compass();

.gwikon-compass-alt();

.gwikon-credit-card();

.gwikon-dashboard();

.gwikon-download();

.gwikon-download-alt();

.gwikon-edit();

.gwikon-eject();

.gwikon-envelope();

.gwikon-envelope-alt();

.gwikon-error();

.gwikon-error-alt();

.gwikon-exclamation-sign();

.gwikon-eye-close();

.gwikon-eye-open();

.gwikon-facetime-video();

.gwikon-fast-backward();

.gwikon-fast-forward();

.gwikon-female();

.gwikon-file();

.gwikon-file-alt();

.gwikon-file-edit();

.gwikon-file-edit-alt();

.gwikon-file-new();

.gwikon-file-new-alt();

.gwikon-film();

.gwikon-filter();

.gwikon-fire();

.gwikon-flag();

.gwikon-flag-alt();

.gwikon-folder();

.gwikon-folder-close();

.gwikon-folder-open();

.gwikon-folder-sign();

.gwikon-font();

.gwikon-fontsize();

.gwikon-fork();

.gwikon-forward();

.gwikon-forward-alt();

.gwikon-fullscreen();

.gwikon-gift();

.gwikon-glass();

.gwikon-glasses();

.gwikon-globe();

.gwikon-globe-alt();

.gwikon-graph();

.gwikon-graph-alt();

.gwikon-group();

.gwikon-group-alt();

.gwikon-guidedog();

.gwikon-hand-down();

.gwikon-hand-left();

.gwikon-hand-right();

.gwikon-hand-up();

.gwikon-hdd();

.gwikon-headphones();

.gwikon-hearing-impaired();

.gwikon-heart();

.gwikon-heart-alt();

.gwikon-heart-empty();

.gwikon-home();

.gwikon-home-alt();

.gwikon-idea();

.gwikon-idea-alt();

.gwikon-image();

.gwikon-inbox();

.gwikon-inbox-alt();

.gwikon-inbox-box();

.gwikon-indent-left();

.gwikon-indent-right();

.gwikon-info-sign();

.gwikon-iphone-home();

.gwikon-italic();

.gwikon-key();

.gwikon-laptop();

.gwikon-laptop-alt();

.gwikon-leaf();

.gwikon-lines();

.gwikon-link();

.gwikon-link-2();

.gwikon-list();

.gwikon-list-alt();

.gwikon-lock();

.gwikon-lock-alt();

.gwikon-magic();

.gwikon-magnet();

.gwikon-male();

.gwikon-map-marker();

.gwikon-map-marker-alt();

.gwikon-mic();

.gwikon-mic-alt();

.gwikon-minus();

.gwikon-minus-sign();

.gwikon-move();

.gwikon-music();

.gwikon-network();

.gwikon-off();

.gwikon-ok();

.gwikon-ok-circle();

.gwikon-ok-sign();

.gwikon-paper-clip();

.gwikon-paper-clip-alt();

.gwikon-pause();

.gwikon-pause-alt();

.gwikon-pencil();

.gwikon-pencil-alt();

.gwikon-person();

.gwikon-phone();

.gwikon-phone-alt();

.gwikon-photo();

.gwikon-photo-alt();

.gwikon-play();

.gwikon-play-alt();

.gwikon-play-circle();

.gwikon-plus();

.gwikon-plus-sign();

.gwikon-print();

.gwikon-qrcode();

.gwikon-question();

.gwikon-question-sign();

.gwikon-quotes();

.gwikon-quotes-alt();

.gwikon-random();

.gwikon-record();

.gwikon-refresh();

.gwikon-remove();

.gwikon-remove-circle();

.gwikon-remove-sign();

.gwikon-repeat();

.gwikon-repeat-alt();

.gwikon-resize-full();

.gwikon-resize-horizontal();

.gwikon-resize-small();

.gwikon-resize-vertical();

.gwikon-return-key();

.gwikon-retweet();

.gwikon-reverse-alt();

.gwikon-road();

.gwikon-rss();

.gwikon-screen();

.gwikon-screen-alt();

.gwikon-screenshot();

.gwikon-search();

.gwikon-search-alt();

.gwikon-shopping-cart();

.gwikon-shopping-cart-sign();

.gwikon-signal();

.gwikon-smiley();

.gwikon-smiley-alt();

.gwikon-smiley-big-smile();

.gwikon-smiley-cry();

.gwikon-smiley-sad();

.gwikon-smiley-smile();

.gwikon-smiley-squint();

.gwikon-smiley-surprised();

.gwikon-smiley-tongue();

.gwikon-smiley-unsure();

.gwikon-smiley-upset();

.gwikon-smiley-wink();

.gwikon-speaker();

.gwikon-star();

.gwikon-star-alt();

.gwikon-star-empty();

.gwikon-step-backward();

.gwikon-step-forward();

.gwikon-stop();

.gwikon-stop-alt();

.gwikon-tag();

.gwikon-tags();

.gwikon-tasks();

.gwikon-text-height();

.gwikon-text-width();

.gwikon-th();

.gwikon-th-large();

.gwikon-th-list();

.gwikon-thumbs-down();

.gwikon-thumbs-up();

.gwikon-time();

.gwikon-time-alt();

.gwikon-tint();

.gwikon-torso();

.gwikon-trash();

.gwikon-trash-alt();

.gwikon-universal-access();

.gwikon-unlock();

.gwikon-unlock-alt();

.gwikon-upload();

.gwikon-user();

.gwikon-video();

.gwikon-video-alt();

.gwikon-video-chat();

.gwikon-view-mode();

.gwikon-volume-down();

.gwikon-volume-off();

.gwikon-volume-up();

.gwikon-warning-sign();

.gwikon-website();

.gwikon-website-alt();

.gwikon-wheelchair();

.gwikon-wrench();

.gwikon-wrench-alt();

.gwikon-zoom-in();

.gwikon-zoom-out();

How to use?

Semantic use

To use the icons without adding additional markup, use the mixin .gwikon-iconname() on your app-*.css.less files.

h2.block-title {
  .gwikon-shopping-cart();
}

Non-semantic use

Copy the file non-semantic-icons.css.less from the Groundwork resources folder to your theme folder, and include it in main.css.less. Alternatively, you can use the general non-semantic-helper.css.less to import all files with classes.

You can then use the classes by adding in the content where you will put your Gwikons:

<p><span class="gwikon-drupal"></span> Drupal is my favorite <span class="gwikon-heart"></span> CMS.</p>

<< Component

Changelog >>

Inspiration & credits

Groundwork created and maintained by John Noceda.
Special thanks to all the popular CSS, LESS, SCSS frameworks and boilerplates out there for the inspiration and great ideas

Groundwork Front-End Framework Licenses

Released under the GNU General Public License, version 2.
Fonts included with Groundwork are released under the SIL Open Font License (OFL) version 1.1

Documentation License

Documentation is licensed under a Creative Commons Attribution-NonCommercial-ShareAlike 3.0 Unported License.