Recently, while using Weebly to design a website, I stumbled upon a webpage () that explains how to add icons to the navigation bar. Below is the code provided:
/* 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');
}
.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 */
}
While this code successfully adds icons to the navigation bar, it does not allow these icons to be linked to other pages. Despite my basic understanding of HTML/CSS, navigating through Weebly's .less format is proving challenging for me. Any assistance would be greatly appreciated.