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

Using Font Awesome with RibbonBarButton...possible?

2 Answers 133 Views
RibbonBar
This is a migrated thread and some comments may be shown as answers.
Gary
Top achievements
Rank 1
Gary asked on 12 Dec 2016, 08:27 PM

Hi,

I would like to use some Awesome Font icons instead of using the ImageUrl attribute, is this possible? I noticed that this seems possible on a normal RadButton but the same implementation does not seem to work on a RibbonBarButton. Ideas, or is this just not possible on a RibbonBarButton?

 

Thanks,
Gary Kearney

2 Answers, 1 is accepted

Sort by
0
Ivan Zhekov
Telerik team
answered on 13 Dec 2016, 08:49 AM
Garry, you have also opened a support thread for this question and I've already replied there. We can continue in either of the threads.

Regards,
Ivan Zhekov
Telerik by Progress
Telerik UI for ASP.NET AJAX is ready for Visual Studio 2017 RC! Learn more.
0
Peter Milchev
Telerik team
answered on 29 Jan 2020, 04:31 PM

Hello,

For convenience and better visibility, I am sharing a summary of the support communication:

While not immediately available via standard ribbon functionality, you could actually still plug font awesome icons.

It takes a bit of tweaking in terms of CSS and Javascript, but it's definitely possible. I've created a sample page that shows how you can use font icons with RadRibbon.

Two things of note: data-icon is the name of the icon without "fa-" prefix; RibbonBarMenu buttons require ImageUrl attribute to work properly, but you can set that to # or a blank image e.g. empty gif (preferably the latter).

 

<telerik:RadRibbonBar runat="server" RenderMode="Lightweight" CssClass="t-fa" ImageRenderingMode="Clip">
		<Tabs>
			<telerik:RibbonBarTab Text="Home">
				<telerik:RibbonBarGroup Text="Large">
					<Items>
						<telerik:RibbonBarButton Text="Large" Size="Large" data-icon="arrows" />
						<telerik:RibbonBarButton Text="Large" Size="Large" />
						<telerik:RibbonBarButton Text="Large" Size="Large" />
					</Items>
				</telerik:RibbonBarGroup>
				<telerik:RibbonBarGroup Text="Medium">
					<Items>
						<telerik:RibbonBarButton Text="Medium" Size="Medium" data-icon="bed" />
						<telerik:RibbonBarButton Text="Medium" Size="Medium" />
						<telerik:RibbonBarButton Text="Medium" Size="Medium" />
					</Items>
				</telerik:RibbonBarGroup>
				<telerik:RibbonBarGroup Text="Small">
					<Items>
						<telerik:RibbonBarButton Text="Small" Size="Small" data-icon="ban" />
						<telerik:RibbonBarMenu Text="Small" Size="Small" data-icon="ban" ImageUrl="#">
							<Items>
								<telerik:RibbonBarMenuItem Text="Item 1" />
								<telerik:RibbonBarMenuItem Text="Item 2" />
								<telerik:RibbonBarMenuItem Text="Item 3" />
							</Items>
						</telerik:RibbonBarMenu>
						<telerik:RibbonBarSplitButton Text="Small" Size="Small" data-icon="ban">
							<Buttons>
								<telerik:RibbonBarButton Text="Item 1" />
								<telerik:RibbonBarButton Text="Item 2" />
								<telerik:RibbonBarButton Text="Item 3" />
							</Buttons>
						</telerik:RibbonBarSplitButton>
					</Items>
				</telerik:RibbonBarGroup>
				<telerik:RibbonBarGroup Text="Button strip">
					<Items>
						<telerik:RibbonBarButtonStrip>
							<Buttons>
								<telerik:RibbonBarButton Text="Button 1" data-icon="book" />
								<telerik:RibbonBarButton Text="Button 1" />
								<telerik:RibbonBarButton Text="Button 1" />
							</Buttons>
						</telerik:RibbonBarButtonStrip>
					</Items>
				</telerik:RibbonBarGroup>
			</telerik:RibbonBarTab>
		</Tabs>
	</telerik:RadRibbonBar>


	<script type="text/javascript">
	Sys.Application.add_load(function() {

		var $ = $telerik.$;

		var $ribbons = $(".RadRibbonBar.t-fa").each(function() {

			var $buttons = $("[data-icon]");
			$buttons.each(function() {
				var $this = $(this);
				var icon = $this.data("icon");

				$this.find(".rrbImagePlaceholder").addClass( "fa fa-" + icon );
			});

		});

	});
	</script>

 

Regards,
Peter Milchev
Progress Telerik

Get quickly onboarded and successful with UI for ASP.NET AJAX with the Virtual Classroom technical trainings, available to all active customers. Learn More.
Tags
RibbonBar
Asked by
Gary
Top achievements
Rank 1
Answers by
Ivan Zhekov
Telerik team
Peter Milchev
Telerik team
Share this question
or