We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. (Last updated on: June 24, 2019).
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback

How to make toolbar bigger?

Thread ID:

Created:

Updated:

Platform:

Replies:

149925 Dec 14,2019 04:07 PM UTC Dec 16,2019 12:43 PM UTC Blazor 2
loading
Tags: Toolbar
Scott Peal
Asked On December 14, 2019 04:07 PM UTC

How do we increase the size of the toolbar icons? Note I am using Font Awesome fonts. Seems the fa-10x is not working to make the icon 10x larger. BTW, we prefer to use Font Awesome and not Syncfusion e-icons. Thanks

    <EjsToolbar>
        <ToolbarItems>
            <ToolbarItem PrefixIcon="fas fa-list-ul fa-10x" TooltipText="Back to search page"></ToolbarItem>
            <ToolbarItem PrefixIcon="fas fa-fast-backward" TooltipText="Start of records"></ToolbarItem>
            <ToolbarItem PrefixIcon="fas fa-caret-left" TooltipText="Previous record"></ToolbarItem>
            <ToolbarItem PrefixIcon="fas fa-caret-right" TooltipText="Next record"></ToolbarItem>
            <ToolbarItem PrefixIcon="fas fa-fast-forward" TooltipText="Last record"></ToolbarItem>
            <ToolbarItem Type="@ItemType.Separator"></ToolbarItem>
            <ToolbarItem PrefixIcon="far fa-save" TooltipText="Save record"></ToolbarItem>
            <ToolbarItem PrefixIcon="far fa-trash-alt" TooltipText="Delete record"></ToolbarItem>
            <ToolbarItem Text="Stuff"></ToolbarItem>
        </ToolbarItems>
    </EjsToolbar>

Scott Peal
Replied On December 14, 2019 05:52 PM UTC

Nevermind, I see how to do it with the template:

            <ToolbarItem TooltipText="Back to search page">
                <Template>
                    <div>
                        <span class="fas fa-list-ul fa-3x" @onclick="ToggleShowDetail"></span>
                    </div>
                </Template>
            </ToolbarItem>

Nevitha Ravi [Syncfusion]
Replied On December 16, 2019 12:43 PM UTC

Hi Scott, 

Greetings from Syncfusion Support. 

We have checked the shared code in which you have used wrong class name to have font awesome list icons. Please refer the following sample. 

<EjsToolbar> 
    <ToolbarItems> 
        <ToolbarItem TooltipText="Back to search page"> 
            <Template> 
                <div> 
                    <span class="fa fa-list-ul fa-3x" @onclick="ToggleShowDetail"></span> 
                </div> 
            </Template> 
        </ToolbarItem> 
        <ToolbarItem Type="@ItemType.Separator"></ToolbarItem> 
        <ToolbarItem CssClass="fa fa-fast-backward fa-5x" TooltipText="Start of records"></ToolbarItem> 
        <ToolbarItem Type="@ItemType.Separator"></ToolbarItem> 
        <ToolbarItem CssClass="fa fa-caret-left" TooltipText="Previous record"></ToolbarItem> 
        <ToolbarItem CssClass="fa fa-caret-right" TooltipText="Next record"></ToolbarItem> 
        <ToolbarItem CssClass="fa fa-fast-forward" TooltipText="Last record"></ToolbarItem> 
        <ToolbarItem Type="@ItemType.Separator"></ToolbarItem> 
        <ToolbarItem CssClass="fa fa-save" TooltipText="Save record"></ToolbarItem> 
        <ToolbarItem CssClass="fa fa-trash-alt" TooltipText="Delete record"></ToolbarItem> 
        <ToolbarItem Text="Stuff"></ToolbarItem> 
    </ToolbarItems> 
</EjsToolbar> 
@code { 
    public void ToggleShowDetail() 
    { 
 
    } 
} 


 

Note: Use CssClass instead of PrefixIcon if incase you haven’t use template option. 

Please try the sample and get back to us if you need any further assistance. 

Regards, 
Nevitha 


CONFIRMATION

This post will be permanently deleted. Are you sure you want to continue?

Sorry, An error occured while processing your request. Please try again later.

Please sign in to access our forum

This page will automatically be redirected to the sign-in page in 10 seconds.

Warning Icon You are using an outdated version of Internet Explorer that may not display all features of this and other websites. Upgrade to Internet Explorer 8 or newer for a better experience.Close Icon

Live Chat Icon For mobile
Live Chat Icon