Icon Picker
Whether you're updating your homepage subheader or creating a new important page on your website, adding icons on pages is so much easier with the Icon Picker feature on the Zest backend.
Icon Picker allows you to quickly search and find a free icon that will automatically be coloured and sized to fit your website design.
Sourcing commercial-grade graphics from Font Awesome, icon picker has more than 7,842 icons and 4 styles, solid, regular, light, and duotone to choose from. These icons look smart and modern and follow a consistent style, ensuring that your website looks professional, loads quickly and scales beautifully.
Follow the steps below to learn how to pick your own icons:
First, log in to your Zest website using your admin username and password. Click Content. You will then be directed to the Content Tree where you can find all the existing pages on your website.
Locate the page you would like to edit. For this example, we will edit the homepage which you can find under Standard Pages. Next, click Edit Page. Since we are editing a website design element, we can go to the front-end of the website and edit the component that contains the icons you want to edit. From here, you can click “view website” on the top right corner of the page.
Click “Show Editing Tools” and find the component you want to edit.
Once you find the component you want to edit, click the pencil icon on the top left corner of the component.
Under Content Items in the Markdown Editor, you will find the existing icons displayed on your website. Find the icon you want to replace by clicking the blank space under the existing icon in the Choose Icon section.
This should automatically generate a pop-up where you can type in your desired icon.
Alternatively, you may also choose to insert an image in place of an icon as per the check icon in the example below.
You may also link your icon to an existing page or to an external website or landing page.
To save all changes on your page, click Save at the top or bottom of the page.
First, log in to your Zest website using your admin username and password. Click Content. You will then be directed to the Content Tree where you can find all the existing pages on your website.
Locate the page you would like to edit. For this example, we will edit the homepage which you can find under Standard Pages. Next, click Edit Page. Since we are editing a website design element, we can go to the front-end of the website and edit the component that contains the icons you want to edit. From here, you can click “view website” on the top right corner of the page.
Click “Show Editing Tools” and find the component you want to edit.
Once you find the component you want to edit, click the pencil icon on the top left corner of the component.
Under Content Items in the Markdown Editor, you will find the existing icons displayed on your website. Find the icon you want to replace by clicking the blank space under the existing icon in the Choose Icon section.
This should automatically generate a pop-up where you can type in your desired icon.
Alternatively, you may also choose to insert an image in place of an icon as per the check icon in the example below.
You may also link your icon to an existing page or to an external website or landing page.
To save all changes on your page, click Save at the top or bottom of the page.
Ask a question
Make a suggestion