Blog

How to Add Vector Icons to Drop-Down Menu

Updated: January 18, 2017  |  Posted: October 13, 2015  |  By Andrei Pogorelov


How to Add Vector Icons to Drop-Down Menu

There is no need to repeat that the most effective way to make site navigation a truly user-friendly is to add icons. Menu Generator includes the collection of 120+ most popular vector icons; you can choose from the general icons (Home, Help, E-mail, etc.), icons for social networking (Facebook, Twitter, etc.), multi-purpose icons (arrows, dots, etc.) and others.

In my previous blog post, I described how to create Drop-Down Menu with icons from the fixed collection. This post describes how to add your own icon set to the menu in Drop Down Menu Generator.


Creating your own icon set

At the first step, we need to prepare the custom icon set which will be used for the menu. There is a fantastic online service Flaticon.com which has the largest database of free vector icons. We use it to prepare the collection of icons for our menu (for the cafe website).


Creating icon set

In the search field, we enter the "food" text to find the required icons. By default, the result collection includes both types of icons: vector icons and images. To select only vector icons, we enable the "Monocolor" option.

Next, we add suitable icons to the "My icons collection", click the "Download collection" button, and choose the "Iconfont" format.

Actually, the "icons collection" is a web font with symbols (vector icons).
It is represented by four formats required by browsers: .ttf, .eot, .svg, and .woff

After downloading, we have the single "my-icons-collection.zip" archive, which includes four web font files with vector icons.


Importing the icon set to Menu Generator

All we need now is to upload the "my-icons-collection.zip" icon set (not required to extract files) to our menu project in Menu Generator.

We select any menu element (1), next click on the element's icon in the properties form (2), next click on the "Custom Icons" tab (3) and upload (4) the "my-icons-collection.zip" file from the local disk. Done!


Creating icon set

Now we see our "food" icons in Menu Generator and can assign them to the menu elements.


Safari on MAC automatically extracts the contents of a ZIP file when it is downloaded. Thus, after downloading the "my-icons-collection.zip", you should again create a single ZIP archive with icon files before uploading it to Menu Generator.

To disable the auto-extract feature, do the following:
Safari -> Preferences -> General -> Uncheck "Open "safe" files after downloading".


Conclusion

For each menu project in Menu Generator, you can upload a separate icon set. If you re-upload the updated icon set, please check the icons in the menu; they may be disordered. If you delete the menu, the custom icon set will be lost.

We used the most popular service Flaticon.com. You can also try out other icon font generators, such as Icomoon.io, Fontello.com, etc.

If you have any questions, please use the Question Form.


Links

Video Tutorial: Adding Custom Icons to Drop-Down Menu
Menu Generator: http://www.dropdownmenugenerator.com
Question Form: http://www.dropdownmenugenerator.com/ContactUs.aspx

Flaticon: http://www.flaticon.com
IcoMoon: http://www.icomoon.io
Fontello: http://www.fontello.com






     Menu Generator  10/13/2017 (1685)         Follow Us         Links
   
APNSoft.com
 © 2003-2017 APNSoft.
  All rights reserved.
Uploading ...