У меня есть следующее кендо-меню:
<div id = "menu"></div>
<script>
console.info("executes")
$("#menu").kendoMenu({
dataSource: [{
text: "menu", icon: "k-icon k-i-more-horizontal", items: [
{ text: "Edit", spriteCssClass: "k-icon k-i-edit" },
{ text: "Delete", spriteCssClass: "k-icon k-i-delete" },
]
}
]
});
</script>
Поскольку spriteCssClass
- это не рекомендуется [https://www.telerik.com/forums/spritecssclass-is-not-working-with-icons-in-latest-version], я попробовал icon:...
, как вы можете видеть в первой строке источника данных. Но это тоже не работает.
Как я могу поместить некоторые значки Kendo в меню Kendo?
Я решил это, просто поместив <диапазон> в text
и установив encoded: false
.
$("#menu").kendoMenu({
dataSource: [{
text: "<span class=\"k-icon k-i-more-horizontal\"></span>", encoded: false, items: [
{ text: "<span class=\"k-icon k-i-edit\"></span><span>Edit</span>", encoded: false },
{ text: "<span class=\"k-icon k-i-delete\"></span><span>Delete</span>", encoded: false }
]
}]
});
Вы также можете использовать значки FontAwesome в меню пользовательского интерфейса Kendo, как описано в следующей статье:
Чтобы использовать поле spriteCssClass, вы должны явно установить стили для класса k-sprite. Ознакомьтесь с примером проекта здесь: dojo.telerik.com/aDOTUvet Он использует последнюю версию пользовательского интерфейса Kendo - 2018.3.1017
Я попробовал это со стилями для класса k-sprite, и это не сработало. Может, где-то я сделал что-то не так.
К сожалению, документы устарели - я написал, что spriteCssClass больше не поддерживается в моем вопросе, но, имея в виду мой собственный ответ: замена класса k-icon в теге <span> на класс fontawesome будет работать.