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-blind();

 .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-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-alt();

 .gwikon-share();

 .gwikon-share-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>

Table of Contents

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.

Theme powered by Groundwork Front-end Framework for Drupal

Ir arriba
Esta web utiliza cookies propias y de terceros para su correcto funcionamiento y para fines analíticos y para mostrarte publicidad relacionada con sus preferencias en base a un perfil elaborado a partir de tus hábitos de navegación. Al hacer clic en el botón Aceptar, acepta el uso de estas tecnologías y el procesamiento de tus datos para estos propósitos. Configurar y más información
Privacidad