CODEWITHSUNDEEP
imagebuttonxamarin.formsfont-awesomeicon-fonts
Gold.strike
Gold.strike

Reputation: 1287

Xamarin.Forms: is possible to create a Button containing both a Text and and an icon fonts as Image?

I tried to create a button that looks like this:

screenshot: button with icon

But, I would like to use a icon fonts (like FontAwesome) instead of a Bitmap as source of the Image.

I thought that I could it with Iconize, but it's not the case: IconizeButton only replace the Text by the FontIcon.

So is there a way to manage both label in Text and FontIcon in Image for a Button?

Upvotes: 1

Views: 2780

Answers (3)

john blair
john blair

Reputation: 546

This works for me - purple icon to the left of white button text - all inside the button. enter image description here

<Button Margin="0,10,0,0" StyleClass="Button" Text="ABC"
                    Command="{Binding OpenWebCommand}"
                    TextColor="White">
                <Button.ImageSource>
                    <FontImageSource FontFamily="FontAwesomeRegular"
                             Color="Purple"
                             Glyph="{x:Static helpers:FontAwesomeIcons.ThumbsUp}"/>
                </Button.ImageSource>

            </Button>

Upvotes: 1

Douglas Higa
Douglas Higa

Reputation: 11

I did this workaround

<Grid >
    <Grid.RowDefinitions>
        <RowDefinition Height="36"></RowDefinition>
    </Grid.RowDefinitions>
    <Grid.ColumnDefinitions>
        <ColumnDefinition ></ColumnDefinition>
        <ColumnDefinition Width="1"></ColumnDefinition>
    </Grid.ColumnDefinitions>
    <Button  Text="Sign in"  Clicked="LoginHandle_Tapped" FontAttributes="Bold" FontFamily="SFUIDisplay" FontSize="14"  BorderRadius="18" HeightRequest="36" BorderWidth="0" TextColor="White" Grid.Column="0" BackgroundColor="#FF0067"/>
    <Label Text="navigate_next" FontFamily="Material Icons" FontSize="16" FontAttributes="None" TextColor="#FFFFFFFF"  HeightRequest="36" Margin="-30,10,0,0" Grid.Column="1"/>
</Grid>

Upvotes: 1

Alessandro Caliaro
Alessandro Caliaro

Reputation: 5768

I think you can create a View with a Grid (1 row and 2 columns). In column 1 you add the Iconize control (with a tapgesture). In Column 2 you add a Label (with a tapGesture). It should works

Upvotes: 0

Related Questions