The National Trust uses custom symbols throughout its handbook and online property pages. These enable the visual identity to establish consistency of meaning through the use of icons for property information.
When these icons are used for print projects, especially the handbook, the nature of the format means there can be a visual key on a separate page that helps readers clarify what a particular icon means.
In digital projects we don't generally have the opportunity to supply a separate index page, if only because constant switching between that and the page with the icons shown would get very tedious. We can however, offer different solutions that enable us to deliver these icons in an accessible and non-intrusive manner.
The symbols as web font
We have access to these symbols as a web font, we means we can avoid the need to generate multiple images for each icon, at different sizes for different applications. But, even with this web font we must still make sure they are meaningful to digital users when they may not be able to see the icon, but must be able to understand what it is implying.
Recommended digital application
Here's how we can make the property symbol web font work in HTML, showing off the symbols to sighted users and ensuring the underlying markup is just pure text with no extraneous characters. When styles are disabled the words rather than the icons are visible, thus ensuring meaning is kept.
Input
<ul class="symbols small">
<li class="countryside">Countryside</li>
<li class="mill">Mill</li>
...
</ul>
Note the class 'large' next to 'symbols'. This gives us nice large (ish) icons.
To benefit from this set-up, write any collection of symbols as shown above, replacing classes and titles where appropriate, with the required symbol. Where possible classes match full symbol names. Double-check the CSS file for exact names.
This set-up uses the least amount of HTML for the most gain. All the grunt work is done by the CSS and web fonts, so even if styles are disabled the content remains meaningful because of the full symbol text written inside each list item.
Change the class small to large if you need larger icons than those below:
Output (of small icons)
Historic house
Castle
Other buildings
Church
Mill
Watermill
Archaeological site
Industrial heritage
Farm/farm animals
Garden
Park
Countryside
Coast
Nature reserve
Holiday accommodation
Licensed for weddings
Available for functions
Public house
1994
Note: This approach has not been tested in old browsers, specifically IE6-8.