Is there a way to add clickable icons on weebly nav bars? - html

Question

Using weebly to create a website and I have come across this webpage(https://editortricks.weebly.com/how-to-add-icons-to-your-weebly-navigation.html) to add icons to the navigation bar. Here`s the code,
/* 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 */
}
This allows the page to have icons in the navigation bar but they cannot be hyperlinked to another page. I have done a bit of HTML/CSS but I have no clue what I`m doing on Weebly's .less format. Please help, would really appreciate it.

Answer 1

You should be able to do id without HTML from the editor - choose the icon and then right-click it - from the menu, choose the "chain link" icon and paste the URL there.
if that didn't work you can use HTML tags within Weebly, so you can do something like this (the simplest way):
<img src="insert image location here" title="insert title" alt="insert description here">