Changing the icons on the home page of your Zephyr website

 

How to modify or change the icons that appear at the top of your Zephyr homepage

ZEPHYR TEMPLATE ONLY

 

You can easily add new icon images to your front page, or change the information displayed, the title, or where the icon routes to on your website. Here is how to make those changes:

  • Log into Webdadi
  • Go to Configuration and select Web Link from the dropdown menu (Manage) and select List
  • You are looking for iconmenu items. There will always be four in total. The Zephyr template has four to display maximum on the home page of your live website.
  • Find the icon you wish to change, for example iconmenu-loud. Double click on it to open it.
  • Label: Here you can change the title of your icon
  • URL: Here you can choose which page you would like to direct your audience to. For example, /about will take the viewers to the about page.
  • Content: This is the wording that will show up under the logo itself.
  • Icon: You can select the icon you would like to appear from an extensive list. For details of the icon options, see below.

    Changing the icon that displays on the home page:
  • Go to https://fortawesome.github.io/Font-Awesome/icons/ and view the page of icons available.
  • Once you have found the icon you wish to use, hover over it and click on it once to open that icon page. You can see what the image will look like in the various sizes from within this page.
  • Now go down to the HTML coding at the bottom of this page. It will look something like
    <I class=”fa fa square”></i>. Highlight the coding marked in red only.
  • This coding needs to be added to your Webdadi icon.
  • Highlight the red letters and press ctrl C to copy the red words and letters.
  • Now go back to your Webdadi Configuration page.


    Now you want to assign this icon of choice to the Web Link so it displays on your homepage:
  • Go back into Web Link within the Configuration menu, and find the iconmenu item you wish to change. Double click on it to open it.
  • In the Icon section, select ctrl P to paste in the red coding from the icon URL page.
  • Select Ok at the bottom to save this change.
  • Your new icon should be visible immediately on your live website.

For more information, with visuals on how to do this, click on the PDF guide below, Changing your icons on the home page.

 

Please Download these instructions


Similar articles