Icon fonts
- Icon fonts are a way of bundling SVG files, so the font icons scale well and look good on high resolution displays.
- This template and elixir-europe.org use the FontAwesome icon font. This is very popular and has lots of documentation and examples.
- The general approach of elixir-europe.org is to keep the interface simple. This means excluding anything that may distract or confuse the user. For this reason, the use of icons is limited. We need to make sure the icons make the site easier to use (as well as provide a more pleasant experience).
- Remember that you can customise icon fonts so you just download the icons you actually need rather than downloading the whole font set. In this mini site I've linked to the whole font set.
Icons in buttons
Here are example buttons from the intranet that use FontAwesome:
The code for the 'Add a document' button is:
<div><a href="" class="doc">Add a document</a></div>You can swap out the class of doc for something else e.g. the 'Add an event' button uses class="event". Buttons are dealt with on the Misc page.
Icons as bullet points
See the lists page.
Social media icons
See the footer below for an example of how to use social media icons provided by FontAwesome.
Icons for document links
Here is a link to a pdf. And here is a generic document icon in a link. The link has the class txt.