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
Use that string in the icon box.
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.
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.
- Double Bed
- 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.
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:
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.