How Can I Label An Image And Use It As A Button?

Viewed 137

I'm trying to make my icon work as buttons but I want to use an image instead. The guide im following uses this code in html:

<input type="radio" name="slider" id="menu-btn">
<label for="menu-btn" class="btn menu-btn"><i class="fas fa-bars"></i></label>

But I want to use an image and my code looks like this:

<input type="radio" name="slide" id="menu-btn">
<img for="menu-btn" class="btn menu-btn" src="menubcf.png" alt="" width="30" height="20">

My goal is to have a menu that can be opened and closed like in this video.

Application test images are available below:

  1. Menu Bar
  2. Popup
1 Answers

Try this:

<input type="radio" name="slide" id="menu-btn">
<label for="menu-btn" class="btn menu-btn">
  <img for="menu-btn" class="btn menu-btn" src="menubcf.png" alt="" width="30" height="20">
</label>

<i> Tag is used for call FontAwsome icons.

Related