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 */
@font-face {
  font-family: 'dashicons';
  src: url('fonts/dashicons.eot');
  src: url('fonts/dashicons.eot?#iefix');
  src: url('fonts/dashicons.woff');
  src:url('fonts/dashicons.svg#svgdashicons');
  src: url('fonts/dashicons.ttf');
}​

---

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.

.wsite-nav-1:before,
.wsite-nav-2:before,
.wsite-nav-3:before,
.wsite-nav-4:before,
.wsite-nav-5:before {
  font-family: 'dashicons';
  position: relative;
  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.

​.wsite-nav-1:before {
  content: "\f102";
}

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!

---

comments powered by Disqus