Insert Small Icon Image into a Button

16 Views Asked by At

I made a multiple choice trivia game and I want each answer choice to have a small image next to it. If you look at the code below you will see how everything is set up.

    <div id="gameChoices">
      <div class="row">
        <div class="left half">
          <div class="container"><button id="buttonOne" data-index="0"></button></div>
        </div>
        <div class="left half">
          <div class="container"><button id="buttonTwo" data-index="1"></button></div>
        </div>
      </div>
      <div class="row">
        <div class="left half">
          <div class="container"><button id="buttonThree" data-index="2"></button></div>
        </div>
        <div class="left half">
          <div class="container"><button id="buttonFour" data-index="3"></button></div>
        </div>
      </div>
    </div>

There 4 buttons and I use a script to generate the questions and answer choices. I want a small logo next to the text inside each button

enter image description here

Ways that I have tried:

<div class="container"><button id="buttonOne" data-index="0"><img src="rose.png" width="30" height="30"/></button></div>

No image appears at all

<div class="container"><img src="rose.png"><button id="buttonOne" data-index="0"></button></div>

Image appears before button on another line

<div class="container"><button id="buttonOne" data-index="0"><span><img src="rose.png" /></span></button></div>

No image appears at all

<div class="container"><button id="buttonOne" data-index="0"><img src="rose.png"></button></div>

No image appears at all

Any help would be appreciated!

0

There are 0 best solutions below