Iconography

Social care and health icons

Social care and health have developed a set of icons for use only in their materials. Please contact web@edinburgh.gov.uk for more details.

Interface icons

There are some icons included by default for use in the user interface. You can easily add any of the below icons with just a class.

  • icon-search
  • icon-cancel-circled
  • icon-menu
  • icon-calendar
  • icon-help-circled
  • icon-info-circled
  • icon-down-open-mini
  • icon-left-open-mini
  • icon-right-open-mini
  • icon-mail
  • icon-youtube
  • icon-facebook-rect
  • icon-twitter-bird
  • icon-googleplus-rect
  • icon-linkedin-rect

Code

HTML

<span class="icon-calendar">12th January 2014</span>

Output: 12th January 2014

<a href="https://twitter.com/Edinburgh_CC" class="icon-twitter-bird"><span class="away">Twitter</span></a>

Output: Twitter

The CSS will automatically add an external link icon at the end of any hyperlink that does not point to an internal page or file. There is no need to add this icon manually. Do not use this or similar icons for any other purpose.

Example: BBC

For links which are icons and obviously external links, the icon can be disabled:

Code

HTML

<span class="no-external"><a href="https://twitter.com/edinburgh_cc" class="icon-twitter-bird"><span class="away">Twitter</span></a></span>

Output: Twitter

Govspeak icons

The CSS will automatically add an icon to any section of content marked up as Govspeak. Use Govspeak to denote special types of content as outlined in the Govspeak documentation.