how to insert image instead of nav menu component-CodePudding

My piece of code html looks like this

<nav>
  
    <li><span><a href="">About</a></span></li>
    <li><span><a href="">Work</a></span></li>
    <li><span><a href="">History</a></span></li>
    <li><span><a href="" >Contact</a></span></li>
    
</nav>

so I want to replace this menu component with some Svg images. I try just open div tag inside 'li', 'span' like everywhere but is does not work what I have to do?

CodePudding user response：

You're syntax is wrong. <li> has to be nested inside either <ul>, <ol> or <menu>. You can choose whichever one you want, but I think that your situation might work the best with <menu>.

<nav>
  <menu>
    <li><span><a href="">About</a></span></li>
    <li><span><a href="">Work</a></span></li>
    <li><span><a href="">History</a></span></li>
    <li><span><a href="" >Contact</a></span></li>
  </menu> 
</nav>

Now, the rest depends on what SVG you're talking about, are you using an SVG icon that you have included in your project folder or you're importing and external library like fontawesome icons.

CodePudding user response：

You can replace the text links in your navigation menu with SVG by using img tag within a tag. Make sure to specify the source of the SVG image using the src attribute and add class to the img tag to style it.

    <nav>   
        <li><span><a href=""><img src="svg.svg" ></img></a></span></li>
        <li><span><a href=""><img src="work.svg" ></img></a></span></li>
        <li><span><a href=""><img src="history.svg" ></img></a></span></li>
        <li><span><a href=""><img src="contact.svg" ></img></a></span></li>
        
    </nav>