集成FontAwesome到KendoUI CSS

我的工作是用ASP.NET MVC和劍道UI建立了一個網站。我試圖添加一個自定義圖標到Kendo UI網格中顯示的按鈕，但我被卡住了。集成FontAwesome到KendoUI CSS

這裏是在網格中的代碼來設置按鈕：

command.Custom("copy") 
    .Text(" ") 
    .Click("copyNAddEvent") 
    .HtmlAttributes(new { @class = "copy", title = "Copy this event" });

下面是該按鈕的CSS：

.k-grid .k-button.copy{ 
    min-width: 40px; 
}

下面是在FontAwesome CSS類（包含在該項目），我需要：

fa fa-files-o

我不是很好的CSS，它看起來像當你使用柯ndo類，它創建一個跨度，其中的圖標。無論如何，我更喜歡足總杯圖標，希望有人能指引我朝着正確的方向前進。

來源

2017-04-10 TrevorGoodchild

我只是發佈了一個答案，但看着它再次我想知道你爲什麼不只是'發發 - 文件 - O'類添加到按鈕？ –

您可以通過設置使得圖標字體真棒Unicode和把它在僞元素後，隨便怎麼樣的字體真棒穿上元素的圖標進行設置。查看圖標詳細信息時可以找到該unicode。這裏是FA-文件-O之一：http://fontawesome.io/icon/files-o/

.k-grid .k-button.copy:after { 
    content: '\f0c5' 
    font-family: FontAwesome; 
}

來源

2017-04-10 17:37:03

謝謝你，這真是太棒了。我也有這個專欄的'編輯'和'刪除'按鈕。我想爲這些使用相同的東西。我嘗試了你的代碼，只是將'複製'改爲'編輯'和'刪除'，並指向正確的圖標，但Kendo默認圖標也顯示出來。你有任何想法如何擺脫默認圖標？ – TrevorGoodchild

您需要進入瀏覽器檢查器，看看圖標來自哪裏，然後隱藏它或用css覆蓋它。 –

是的，背景圖像。這些glyphicon的東西對我來說是個謎。你讓我在我需要的地方，瘋狂的道具！ – TrevorGoodchild

我上面的答案達成一致，只是確保你有包含在你的標記字體真棒CSS文件。

來源

2017-04-10 17:44:50 ajafik

看起來你正在使用的MVC包裝。在那種情況下，我所做的就是使用列模板。

客戶端模板包含了相關的代碼 - 自舉按鈕錨標籤和<i/>爲fontawesome圖標。如果需要，我可以在右側添加「編輯」之類的文本。

注意，這是在劍道網編輯按鈕，所以我包括錨類k-grid-edit使劍道將執行編輯操作。還有其他類的標準網格動作，如k-grid-add，k-grid-delete，k-grid-excel等。對於某些自定義，您可以使用自己的選擇器或將onclick添加到錨點並移除不需要的k ---柵網編輯。

.Columns(column => 
{ 
    column.Template(t => { }).Title("Edit").Width(10) 
     .HtmlAttributes(new { style = "text-align: center;" }) 
     .HeaderHtmlAttributes(new { style = "text-align:center;", title = "Edit" }) 
     .ClientTemplate(@"<a class='btn btn-info btn-xs k-grid-edit' title='Edit this item.'><i class='fa fa-edit'></i></a>");

使用這種技術，你不會看到Kendo的默認圖標 - 只是fa。

來源

2017-04-10 18:46:30

現在的問題是。如果我想隱藏客戶端模板上的按鈕，取決於某些Razor語法If語句。我怎麼能做到這一點 – Mohsan

劍道有它自己的[哈希語法]（http://docs.telerik.com/kendo-ui/framework/templates/overview）。 –

集成FontAwesome到KendoUI CSS

回答

相關問題