在前端開發中，圖標是一個很重要的元素。HTML中定義圖標代碼的方式有很多種，其中比較常用的方式是使用pre標簽。下面是HTML定義圖標代碼大全：

/* 使用Unicode字符作為圖標 */
.icon {
font-family: "Font Awesome 5 Free";
content: "\f007"; /* Unicode字符 */
}
/* 使用SVG作為圖標 */
.icon {
background-image: url("icon.svg");
width: 20px;
height: 20px;
}
/* 使用字體文件作為圖標 */
@font-face {
font-family: "My Icons";
src: url("icons.ttf") format("truetype");
}
.icon {
font-family: "My Icons";
content: "\e001"; /* 字符編碼 */
}
/* 使用圖片作為圖標 */
.icon {
background-image: url("icon.png");
width: 20px;
height: 20px;
}
/* 使用CSS畫圖作為圖標 */
.icon {
position: relative;
width: 20px;
height: 20px;
}
.icon::before {
content: "";
position: absolute;
top: 0px;
left: 0px;
width: 20px;
height: 20px;
background: red;
}
.icon::after {
content: "";
position: absolute;
top: 5px;
left: 5px;
width: 10px;
height: 10px;
background: white;
}

以上就是HTML定義圖標代碼大全，根據需要選擇適合自己的方式即可。