Using Font Awesome with RibbonBarButton...possible?

[Gary]

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

[Ivan Zhekov]

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

[Peter Milchev]

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