Fetch KendoUI Icons

Forms SharePoint 2019
1

Hi,

is it possible to fetch Kendo UI Icons and add them to a button control?

Thanks!

2

Dear @DryChips,
Not Kendo UI icons, but you can use Office UI Fabric icons, like this:

fd.spRendered(function(){
  $('.my-button').prepend('<i class="ms-Icon ms-Icon--Delete"></i>');
});
1 Like
3

Perfect, that will suffice!

Thanks as always!

4

Hi Nikita,

How do I move the position of the icon to the right side of the text?

5

Dear @DryChips,
Use $('.my-button').append('<i class="ms-Icon ms-Icon--Delete"></i>');

2 Likes
6

Awesome!

Can I ask how you possess this knowledge? Is there a website you go to learn how to make these changes or is this just knowledge you've developed over the years of being a Web Developer?

7

Dear @DryChips,
Of course, much comes with experience, but there are plenty of sites where you can learn to code.

I would personally recommend this place to get started for everyone, not an ad, it's a free resource to learn coding and an awesome platform - https://www.freecodecamp.org/ (best courses I've found, even compared to most paid ones)

Additionally, use resources which are available for free, such as:

  1. Many tutorials on HTML, CSS, JavaScript - https://www.w3schools.com/
  2. Great documentation on all things web - Web technology for developers | MDN
  3. Great place to ask general questions - https://stackoverflow.com/
1 Like
8

Do you know how to animate these icons?

If I hover over the icon I want to make it turn clockwise.

9

Dear @DryChips,
You can try adding something like this in CSS, but use your icon class:

.ms-Icon--Delete:hover {
  transition: all 0.3s ease-in-out 0s;
  transform: rotate(360deg)!important;
}
1 Like