Cog Icon signifying link to Admin page

Built on Spanglefish 3

@Spanglefish Youtube

Spanglefish 3 Manual

Using Page and List Icons

We've introduced the ability to add icons to list items using the icon-list block, and also to the main menu using icons from Iconify. We'll add a full tutorial here shortly.

You can browse Iconify to find an icon you'd like to use and get its name. The name is always a string with a colon in it. For example

ion:home

Use that string in the icon box.

Menu Icons

You can add an individual icon to each page on your menu. However bear in mind that a horizontal menu on desktop layout only has limited space, and icons will take much of that up.

It's fine to try it out though - you can always remove the icons if they cause problems.

As an example, go to your home page, click on Page Settings and then in the Page Icon box type in ion:home. (It's already there as a placeholder, but you'll need to type it.) Once you save it you should see a home icon in your main menu.

Screenshot of a self-catering cottage website Website with icons in menu

Icon List Block

You can add a list with icons using the icon-list block type. For example you might use it to show the facilities in your self-catering cottage.

  • TV
  • Wifi
  • Shower
  • Double Bed
  • Parking
  • Central Heating
  • Log Fire
  • Fire Extinguisher
  • USB Charger

Using the Style button you can choose the icon colours and how many columns to show the list in.

Contact Details blocks

You can use icons in your site's contact details rather than the text labels, so for example instead of the word email: you can have an email icon.

To do this, click EDIT BLOCK > Settings on your Contact Details page and follow the instructions.

Using Iconify

The Iconify website has a huge number of icons - over 150,000 - and is very complicated with lots of options, but for our purpose it's fairly easy to use.

Have a look at the screenshot of the Iconify site. We've done a search for Palm Tree and it shows around 20 results. We've then clicked on the one we want to use and it now shows at a larger size below the results. Beside it is the icon's name:

game-icons:palm-tree

That's the only bit of information we need. Use it in the Choose Icon box in your website admin and the system will automatically add it to your site.

Note that some of the icons are coloured, but they'll only show as silhouettes on your site.

Tip: when you click in the icon name box in Iconify a small 'copy' button appears - use this to copy the name as Ctrl+C doesn't always work.

Site Search
^