This is a migrated thread and some comments may be shown as answers.

align icon to the right of button text

4 Answers 707 Views
Button
This is a migrated thread and some comments may be shown as answers.
Dean
Top achievements
Rank 1
Dean asked on 10 Sep 2014, 12:37 AM
What is the best way to align an icon to the right of a button? Is there a built in way or do I need to add my own span for the icon and align it with CSS?

Regards
Dean

4 Answers, 1 is accepted

Sort by
0
Iliana Nikolova
Telerik team
answered on 10 Sep 2014, 12:10 PM
Hi Dean,

In order to achieve this you should override the default styling using custom CSS rules. As an example: 
.k-button .k-icon {
   float: right;
   margin: 2px;
}

Regards,
Iliana Nikolova
Telerik
 
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
 
0
Igor
Top achievements
Rank 1
answered on 06 Apr 2020, 06:22 PM

It is does not work, could you please provide an example of it. 

 

Thank you!

1
Ivan Danchev
Telerik team
answered on 08 Apr 2020, 02:57 PM

Igor,

Iliana's post is from 2014 when the themes didn't use flex. Now they do, so instead of using float to position the icon to the right you can use the following CSS rule:

.k-button .k-icon {
  margin-left: 5px;
  order: 2;
}

The dojo example: https://dojo.telerik.com/arahIQOf

Regards,
Ivan Danchev
Progress Telerik

Progress is here for your business, like always. Read more about the measures we are taking to ensure business continuity and help fight the COVID-19 pandemic.
Our thoughts here at Progress are with those affected by the outbreak.
0
Igor
Top achievements
Rank 1
answered on 26 Jun 2020, 05:59 PM
Thank you for the update! It worked perfectly. 
Tags
Button
Asked by
Dean
Top achievements
Rank 1
Answers by
Iliana Nikolova
Telerik team
Igor
Top achievements
Rank 1
Ivan Danchev
Telerik team
Share this question
or