Changing icon on ButtonSettings inside the ribbon

[Rakotondrabesa]

Hi ,

I have to change the icon inside the ribbon, but I don't know how to do because the ButtonSettings tag don't have an attributes to change the icon.

I tried to put an URL on the style ej.icons.css used by the ribbon like:

.e-ribbon .e-new:before {

    content:url("~/Content/images/arrow2.png");

    font-size: 36px;

    position: relative;

    left: -12px;

    top: -4px;

}

but it doesn't work.

I work with the ribbon on the assemblies

<%@ Register Assembly="Syncfusion.EJ.Web, Version=12.4450.0.24, Culture=neutral, PublicKeyToken=3d67ed1f87d44c89" Namespace="Syncfusion.JavaScript.Web" TagPrefix="ej" %>

<%@ Register Assembly="Syncfusion.EJ, Version=12.4450.0.24, Culture=neutral, PublicKeyToken=3d67ed1f87d44c89" Namespace="Syncfusion.JavaScript.Models" TagPrefix="ej" %>

Can you help me?

thanks a lot

[Sarath Kumar P]

Hi Rakotondrabesa,

Thanks for using Syncfusion products.

We would like to let you know that to apply icon to the buttons in the ribbon control use properties “PrefixIcon” and “SuffixIcon” . Please refer the below Code snippets,

<ej:ContentGroup Id="undo" Text="Undo" ToolTip="Undo" IsBig="false">

<ButtonSettings ContentType="TextAndImage" ImagePosition="ImageTop" PrefixIcon="e-ribbon e-undo" Click="executeAction" Type="Button" />

</ej:ContentGroup>

<ej:ContentGroup Id="upDown" Text="Up & Down" ToolTip="Up & Down">

<ButtonSettings ContentType="ImageTextImage" PrefixIcon="e-upimg" SuffixIcon="e-downimg" Click="executeAction" Type="Button" Width="120" />

</ej:ContentGroup>

To put an URL on the content attribute refer the below format and the link,

.e-ribbon .e-new:before {

content: url('../images/arrow2.png');

font-size: 36px;

position: relative;

left: -12px;

top: -4px;

}

Link: http://stackoverflow.com/questions/946403/insert-image-after-each-list-item

Please find the below sample for your reference.

Sample: http://www.syncfusion.com/downloads/support/forum/119116/RibbonButtonIcons-1351014312.zip

Please let us know if you need any further assistance.

Regards,

Sarath Kumar P.

[Rakotondrabesa]

Hi,

Thanks a lot it's work

Regards

[Sarath Kumar P]

Hi Rakotondrabesa,

Thanks for your update.

Please let us know if you need any assistance.

Regards,

Sarath Kumar P.

[nexus]

and how can i add a url to a button 

[Karthik Ravichandran]

Hi Kelvin, 

 

Thanks for contacting syncfusion support. 

 

We have checked your query (“how can i add a url to a button”). You can achieve your requirement by using javascript window.open method in click event of ribbon buttons. Please refer the below code block. 

 

[cshtml] 

<ButtonSettings Type="Button" ContentType="ImageOnly" ImagePosition="ImageTop" PrefixIcon="e-icon e-ribbon e-new" Click="executeAction" /> 

 

[script] 

function executeAction(args) { 

    if (args.model.text == "New") { 

        window.open("https://www.syncfusion.com/", "_blank") 

    } 

} 

 

For your conveniene we have attached the sample in the below link, 

 

Sample 

 

Please let us know if you need further assistance on this. 

 

Regards, 

Karthik R