Add an image to the CloudUpload button

[Greg]

I'd like to add an image to the RadCloudUpload button so it matches other buttons - how can I do that? In the attached image the top button is a normal RadButton with image - below that is the RadCloudUpload to which I'd like to add an image or icon.

Thanks.

[Magdalena]

Hello Greg,

We are afraid that the cloud upload has not implement such functionality. You can achieve the described behavior by an additional custom CSS as the following:

span.rcuFileWrap.rcuButton:before {
    display: inline-block;
    width: 16px;
    height: 16px;
    margin-left: -12px;
    margin-right: 4px;
    content: "\e801";
    font: 16px/1 "WebComponentsIcons";
}

Here you can find the full list of our font-icons. Inspecting an icon in a browser developer tool you can find its code for the content CSS property. We are sending you this screen shot for your reference. You can use for the purpose also your custom font, or a sprite image.

Do not hesitate to contact us if you have other questions.

Regards,
Magdalena
Telerik by Progress

[Greg]

Here is how I successfully added the image to the CloudUpload (with help from a support ticket):

Add the CssClass customIconButton to the CloudUpload referencing the style below:

 

  <style type="text/css">
 
    .RadCloudUpload.customIconButton .rcuButtonText
    {
        /*add image*/
        background-image: url('images/png16/up.png');
        background-repeat: no-repeat;
        /*prevent text and image overlap*/
        padding-left: 20px;
        background-position: 0px 4px;
    }
    .RadCloudUpload.customIconButton .rcuButton
    {
        /*adjust the space on the left*/
        padding-left: 10px;
    }
</style>

You can see the CloudUpload to the right of a regular RadButton in the attached image.