CODEWITHSUNDEEP
htmlcssfrontendweebly
ray
ray

Reputation: 1

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

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.

Upvotes: 0

Views: 226

Answers (1)

Guy Nachshon
Guy Nachshon

Reputation: 2655

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):

<a href="insert destination URL here"><img src="insert image location here" title="insert title" alt="insert description here"></a>

Upvotes: 0

Related Questions