How To Add Icons To Your Weebly Navigation
Tuesday October 4, 2016 | Comments
This tutorial will show you how to add icons to the parent menu items of your Weebly navigation menu.
The icons we'll be using for this tutorial are Dashicons, which come in the format of a font file. Having the icons come in a font file allows us to easily change the icons' color, size, etc without affecting its quality on the many different media devices available today.
Step 1. Download the icons
Head over to GitHub and download the Dashicons ZIP file.
Step 2. Open The HTML/CSS Editor
Click on "THEME" at the top, then click on "Edit HTML/CSS" on the left.
Step 3. Upload font files
After you've extracted the ZIP file you downloaded in Step 1, upload the icons' font files(4) by clicking on "ASSETS>New Folder", name the new folder "fonts". Then click on "fonts>Upload File(s)..." and select all 4 font files from your computer.
Step 4. Add icon font face CSS codes
On the left under "STYLES", click on "main.less" and add the CSS codes below to the file. These CSS codes will tell all modern browsers where to find the font files that house the icons.
/* External Fonts */
Step 5. Add icon position CSS Codes
Directly below the code you added in the previous step, add the CSS codes below to the file as well. These codes will provide the basic styling of the icons and their positioning in relation to the navigation menu items.
Note: Take note that ".wsite-nav-1" correlates to the first menu item in your navigation, ".wsite-nav-2" correlates to the second, and so on. If you have 6 menu items, you'll need to add ".wsite-nav-6" to the code below, and so on.
top: 1px; /* Changes the icons' vertical position */
margin-right: 0px; /* Changes the icons' horizontal position */
color: #000000; /* Changes the icons' color */
font-size: 1em; /* Changes the icons' size */
Step 6. Add icon CSS codes
Now it's time to add your icons! For each menu item, you will need to add a new CSS code to your CSS file. For this step, we'll do the first menu item on the demo site which is "HOME".
Choose the icon you want to use here, grab the icon's "f" code -- we'll be using "f102" because it displays a little house icon -- and since this is the first parent menu item, we'll be using the CSS code ".wsite-nav-1".
With that information in hand, add the code below directly below the CSS code we added in the previous step. Once you add the code below, a little house icon should appear directly before "HOME" in the navigation.
Repeat this step for the other menu items, but instead use ".wsite-nav-2" for the second menu item, and so on.
You're done! Publish your site to see your new navigation icons!
Details of Project
Level of difficulty: Intermediate
Time to complete: 45 minutes
How To Install Any Font Into Your Weebly Site
Updated on June 20, 2016
How To Create A Sidebar That Will Appear On Every Standard Weebly Page
Updated on June 11, 2016
How To Create An "<h1>" Tag In Your Weebly Site
Updated on July 9, 2016
Weebly Tricks on Facebook
Weebly Tricks on Google+