圖標Button

---

立即下載Kendo UI for jQuery

Button提供了通過向其添加圖標在視覺上增強其文本內容的選項。你可以添加一個帶有img元素或背景圖像(通常是一個子圖形)的圖標，考慮到web標準，使用背景圖像更好，因為圖標代表的是裝飾而不是結構性內容。

Button提供icon、spriteCssClass和imageUrl屬性，用于配置圖標。對于特定的Button您只能使用其中一個屬性，如果您定義了多個屬性則Button將按照前面所述的順序只使用其中一個屬性。

有關呈現圖標按鈕的完整示例，請參閱向按鈕添加圖像的文章。

增強按鈕的視覺效果：

• 使用背景圖標
• 使用圖像圖標
• 使用字體圖標

背景圖標

背景圖標應用于icon或spriteCssClass屬性并作為span元素的背景顯示。如果按鈕有一個k-sprite CSS類則可以自動渲染span元素或者使用現有的span元素，如果使用了圖標屬性則使用k-icon類。icon和spriteCssClass屬性的區別在于icon是用來作為主題子圖像一部分的內置Kendo UI圖標。有關可用圖標名稱的列表，請參閱關于使用圖標的文章。

下面的示例演示如何在Button組件中使用圖標。

<button type="button" id="editButton">Edit</button>
<button type="button" id="deleteButton"><span class="k-icon"></span>Delete</button>

<script>
$(function(){
$("#editButton").kendoButton({
icon: "pencil"
});

$("#deleteButton").kendoButton({
icon: "trash"
});
});
</script>

前面示例中的icon配置將生成以下HTML輸出。

<button type="button" id="editButton" class="k-button k-button-icontext"><span class="k-icon k-edit"></span>Edit</button>
<button type="button" id="deleteButton" class="k-button k-button-icontext"><span class="k-icon k-delete"></span>Delete</button>

下面的例子演示了如何應用spriteCssClass。

<button type="button" id="editButton">Edit</button>
<button type="button" id="deleteButton"><span class="k-sprite"></span>Delete</button>

<script>
$(function(){
$("#editButton").kendoButton({
spriteCssClass: "myEditIcon"
});

$("#deleteButton").kendoButton({
spriteCssClass: "myDeleteIcon"
});
});
</script>

從技術上講spriteCssClass可以用來實現與icon相同的結果，但icon避免了同時設置兩個CSS類的需要并提供了一定程度的抽象展示。例如以下兩種配置實際上是相同的，#button2也應用了一個k-sprite CSS類到span元素但它不改變按鈕的外觀。

$(function(){
$("#button1").kendoButton({
icon: "foo"
});

$("#button2").kendoButton({
spriteCssClass: "k-icon k-foo"
});
});

在某些情況下您可能希望使用只包含圖標而沒有文本的Button，這種情況下為了增加組件的可訪問性，可以在sprite span中包含一個文本標簽。

<button type="button" id="deleteButton"><span class="k-sprite">Delete</span></button>

<script>
$(function(){
$("#deleteButton").kendoButton({
spriteCssClass: "myDeleteIcon"
});
});
</script>

圖像圖標

圖像圖標應用于imageUrl屬性并作為img元素顯示，按鈕可以自動呈現img元素或使用現有的img元素(如果它有k-image CSS類)。要在手動添加img元素時增加組件的可訪問性請應用alt屬性。

<button type="button" id="editButton">Edit</button>
<button type="button" id="deleteButton"><img class="k-image" alt="Delete" />Delete</button>

<script>
$(function(){
$("#editButton").kendoButton({
imageUrl: "/images/myEditIcon.gif"
});

$("#deleteButton").kendoButton({
imageUrl: "/images/myDeleteIcon.gif"
});
});
</script>

字體圖標

通過在spriteCssClass屬性上設置所需的第三方CSS類，你也可以在Kendo UI Button中使用FontAwesome或其他字體圖標。但這種方法會呈現一個k-sprite CSS類，它應用的字體和大小樣式可能會干擾字體圖標樣式。

要處理這個問題，可以使用以下方法之一：

覆蓋破壞字體圖標的Kendo UI樣式：

```dojo
<link rel="stylesheet"
 />
<style>
.k-button .fa {
font-size: inherit;
line-height: inherit;
width: auto;
height: auto;
margin-left: 0;
}
</style>

<button type="button" id="archiveButton">Archive</button>

<script>
$("#archiveButton").kendoButton({
spriteCssClass: "fa fa-archive"
});
</script>
```

在Kendo UI Button中直接包含所需的HTML標記和CSS類作為模板內容，Button就不會呈現k-sprite類：

```dojo
<link rel="stylesheet"
 />

<button type="button" id="archiveButton"><span class="fa fa-archive"></span> Archive</button>

<script>
$("#archiveButton").kendoButton({});
</script>
```