jQuery Input Icon是一款能夠讓輸入框顯示圖標的jQuery插件，它可以使輸入框外觀更加美觀，并且讓用戶更容易理解輸入框的作用。本文將詳細介紹如何使用jQuery Input Icon插件。

$(function() {
$('input[type="text"]').inputIcon({
icon: 'fa fa-search'
});
});

首先，我們需要在head中引入jQuery庫以及顏色插件：

<!-- 引入jQuery庫 -->
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<!-- 引入input icon插件 -->
<script src="path/to/jquery.input-icon.js"></script>
<!-- 引入Font Awesome圖標庫 -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">

然后，我們需要為我們的輸入框添加一個圖標。我們可以在插件初始化的時候傳遞一個icon參數來指定圖標CASS類：

<!-- HTML -->
<input type="text" name="search">
<!-- JS -->
$(function() {
$('input[type="text"]').inputIcon({
icon: 'fa fa-search'
});
});

通過上述代碼，我們就可以在輸入框前面添加一個放大鏡圖標。需要注意的是，在使用jQuery Input Icon時，輸入框必須設置name屬性。

jQuery Input Icon還有其他一些配置項，例如，我們可以通過color參數來指定圖標的顏色。具體用法可以參考官方文檔。

到這里，本文介紹完畢。希望這篇文章對你的開發有所幫助！