Trying to impliment font awesome

[sitefinitysteve]

I need to globally set a class on the combobox dropdown arrow

...but there's no public css property to do that right?  There's one for the control, the dropdown list, the input, and the label....but no button.

So I'm looking for a skinnable property, not a workaround to inherit from he control or parse the dom with jquery, or do any codebehind.  There's too many comobs to just go around updating all the code in every page (hoping to just leverage a .skin file)

Yes, no?...could you add one?
Steve

[Princy]

Hi Steve

I suppose you want to set a css class for the combobox dropdown arrow.
Try the following CSS
CSS:

<style type="text/css">
.RadComboBox_Default .rcbInputCell, .RadComboBox_Default .rcbArrowCell
{
background-image: url('./Images/urdropdownimage') !important;
}
</style>

Thanks
Princy

[sitefinitysteve]

Hey Princy,
  No I'm trying to use font-awesome so I need to set the **CLASS**...not style a class :)

Like I need to tell the arrow to be "icon-caret-down" without using any javascript or anything else.  Most controls support this like the RadInputs, I can set the ButtonCssClass to like "icon-search" in the .Skin file, but the RadCombo seems to have not exposed the button class.

[Ivan Zhekov]

Hi, Steve.

Unfortunately, that's not available as of now. In fact this is the first such request we are having. The show more results arrow (down caret) is rendered as is with no logic applied and it can not be overridden.

I completely understand your point -- to use font for icons and it's a valid point.

Yet without any modifications, just from the API attributes that can not be done.

We are almost at the 2013 Q1 release, so such addition will be impossible, yet we could consider it for a future update.

Regards,
Ivan Zhekov
the Telerik team

[Mattia]

Hi, any news about using font awesome into a combobox?

[Magdalena]

Hello Stefania,

Thank you for getting back to us. If you would like us to add some feature to ajax controls, you can log a feature request in our feedback portal, so also other people can vote for it and you will able to follow the item as well.

Regards,
Magdalena
Telerik by Progress

[Hagai]

Any news about it?

 

I'm using the RadComboBox with the Bootstrap skin and I need that the arrow will look exactly as the native dropdown icon of input select and right now it doesn't have a look at my attached image.

 

How can I do it?

 

[sitefinitysteve]

Wow, old post...

First off the bootstrap skin is still REALLY bad. For it to be a true bootstrap "skin" one should be able to use it on a page and not know it's native or not... RadControls don't remotely go far enough. Should rename to Bootstrap-ish.

That being said, it should be doable with some CSS, I don't have the time to figure it out for you, sorry... just inspect both dropdowns and figure it out.  The bootstrap css is likely already loaded on your page.

[Peter Milchev]

Hello Hagai,

The advice Steve gave you is the way to go, you can inspect the elements and ultimately figure out a way to change the content of the :before pseudo-element for the arrow. Here is a sample CSS style that will change the arrow to a chevron:

.RadComboBox_Bootstrap .rcbActionButton .p-i-arrow-60-down:before {
    content: '\e015'
}

The font family for the icons is actually WebComponentsIcons, so you can check this list of icons and find out the Unicode for the desired icon, in this case, the .k-i-arrow-chevron-down:

• https://docs.telerik.com/kendo-ui/styles-and-layout/icons-web#list-of-font-icons 

Regarding the Bootstrap skin, it is indeed a custom skin and does not use or load Twitter's bootstrap styles and scripts, so there might be some differences but generally, they are designed to blend in with other bootstrap controls.

If you are interested in the integration discussion, you can see this feedback portal item:

• https://feedback.telerik.com/aspnet-ajax/1373104-bootstrap-themes-integration 

Regards,
Peter Milchev
Progress Telerik