Providing service icons

Each service plugin must provide a suiting icon. To do so, you have two options:

1. Using a webfont class
2. Adding your own icon as SVG file.

Note that either an SVG icon or an 'icon font class' is required. If both an icon font and icon is given, the icon is preferred.

Using a webfont class

This is the easiest way. All you have to do is to browse through http://fortawesome.github.io/Font-Awesome/cheatsheet/ and get your service specific icon class. Themes may choose to use a different icon-font, however the icon-class names used must adhere to the ones of font awesome.

Additionally you can specify a background color. It should be in high contrast to the icon, which will be displayed using a white font. Otherwise the default background color #ddd will be used.

The icon is specified as part of the service plugin information, e.g.:

class TwitterService extends OAuthServiceBase implements TwitterServiceInterface {

  /**
   * Defines the plugin.
   */
  public static function getInfo() {
    return array(
      'name' => 'fluxtwitter',
      'label' => t('Twitter'),
      'description' => t('Provides Twitter integration for fluxkraft.'),
      'icon font class' => 'icon-twitter',
      'icon background color' => '#2fa8fc'
    );
  }
 // ...
}

Adding your own icon as SVG

Alternatively you can provide your own icon as a SVG file. The icon must be white on transparent background, with a 1:1 aspect ratio. It's suggested to use 100px width and 100px height.

Don't forget to specify your own background-color when providing a SVG file also, as it applies as well.

Your plugin info could look like the following:

class TwitterService extends OAuthServiceBase implements TwitterServiceInterface {

  /**
   * Defines the plugin.
   */
  public static function getInfo() {
    return array(
      'name' => 'fluxtwitter',
      'label' => t('Twitter'),
      'description' => t('Provides Twitter integration for fluxkraft.'),
      'icon' => 'images/fluxicon_twitter.svg',
      'icon font background color' => '#2fa8fc'
    );
  }
 // ...
}

Attached is an icon template file you can use. However, below you find some instructions for creating a SVG icon using the genericons icon library and Inkscape.

Please note that InternetExplorer Version 8 doesn't support displaying SVG files. If your theme is not providing a polyfill like https://code.google.com/p/svg2vml/ the webfont icon won't be displayed (probably, needs to be defined).

Instruction to create a SVG icon:

• Open attached fluxicon_template.svg in Inkscape or Adobe Illustrator
• Delete the twitter shape and add your own icon shape. For example you can open http://genericons.com/ (or another gpl based icon library) and copy/paste your desired icon (when using genericon click on "Copy Glyph") into the icon layer. Note: Of course you have to install the Genericon webfont on your system before.
• Adopt shape size or font-size so that the icon fits exactly into the 100x100 canvas.
• Make sure that the shape-color for the icon is set to #ffffff. There is a background shape available for testing purpose (don't forget to delete this before saving).
• In Inkscape select the icon and click on Path > Object to path.
• Save the icon as Plain SVG (Inkscape) or SVG in Adobe Illustrator (using SVG Profile 1.1 should be fine) and name the image fluxicon_YOURSERVICE.png
• You are done.

API documentation

The complete, up2date API documentation to all relevant icon keys can be found in code, at the ServiceInterface.