如何添加图像而不是文本

Question

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

here it is

＆＃13;

＆＃13;

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>

＆＃13;

＆＃13;

＆＃13;

Answer 1

使用SVG字体或图标字体可以轻松实现这一点，您可以将字符设置为特定图标，但很难找到具有所需图标的字体。也许您可以使用单选按钮而不是选择下拉列表？

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

＆＃13;

＆＃13;

.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; 
}

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;