html - 如何添加图像而不是文本

Question

您好，我有一个画图应用程序，在下拉菜单中我想添加一个图像而不是文本，例如，而不是选择橡皮擦这个词，它给了我一个图标。

here it is

Drawing tool: <select id="dtool" class="form-control" style="width:100px">
				<option value="line">Line</option>
				<option value="rect">Rectangle</option>
				<option value="pencil">Pencil</option>
				<option value="circle">Circle</option>
				<!--<option value="ellipse">Ellipse</option>-->
				<option value="erase">Eraser</option>
		</select> Line width : <select id="selWidth" class="form-control" style="width:50px">
			<option value="1">1</option>
			<option value="3">3</option>
			<option value="5">5</option>
			<option value="7">7</option>
			<option value="9" selected="selected">9</option>
			<option value="11">11</option>
			<option value="16">32</option>
		</select> Eraser width : <select id="eraseWidth" class="form-control" style="width:120px">
			<option value="6">Small</option>
			<option value="10">Medium</option>
			<option value="17">Large</option>
			<option value="25">Extra Large</option>
		</select> Color : <select id="selColor" class="form-control" style="width:100px">
			<option value="black">Black</option>
			<option value="blue" selected="selected">Blue</option>
			<option value="red">Red</option>
			<option value="green">Green</option>
			<option value="yellow">Yellow</option>
			<option value="gray">Gray</option>
		</select>

Answer 1

这可以使用 SVG 字体或图标字体轻松实现，您可以在其中将字符设置为特定图标，但很难找到您需要的图标。也许您可以使用单选按钮而不是选择下拉菜单？

我附上了一支使用 <input type="radio"> 的笔.这是通过将图像放在 <label> 中来完成的。标签，并根据其更改其外观 <input type="radio">被选中。

.form-group {
  display:  flex; 
  flex-direction:  row; 
  align-items:  center;
}
.form-group img {
  height:  60px; 
  width:  60px; 
  object-fit:  contain; 
  object-position:  center center; 
}
.option {
  margin-right:  20px; 
}
.option input + label {
  opacity:  .3; 
}
.option input:checked + label {
  opacity: 1; 
}
.option input {
  display:  none; 
}

<div class="form-group" id="tools">
  <div class="option">
    <input type="radio" name="tool" value="fontain-pen" id="fountain-pen">
    <label for="fountain-pen"><img src="https://image.flaticon.com/icons/svg/686/686492.svg"></label>     
  </div>
  <div class="option">
    <input type="radio" name="tool" value="pencil" id="pencil">
    <label for="pencil"><img src="https://image.flaticon.com/icons/svg/686/686491.svg"></label>     
  </div>
  <div class="option">
    <input type="radio" name="tool" value="eraser" id="eraser">
    <label for="eraser"><img src="https://image.flaticon.com/icons/svg/263/263086.svg"></label>     
  </div>  
</div>
<div class="current-option"></div>