1

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?

Gold.strike
  • 1,269
  • 13
  • 47

3 Answers3

1

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>
Stephen Rauch
  • 47,830
  • 31
  • 106
  • 135
Douglas Higa
  • 11
  • 1
1

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>
john blair
  • 466
  • 5
  • 13
0

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

Alessandro Caliaro
  • 5,623
  • 7
  • 27
  • 52
  • But how do you implement the View? As a new Control or as a Control inheriting from Button? Cause it's not possible to add Content to the Button... – Gold.strike Jan 29 '18 at 09:41
  • The downside of using TapGesture is it no longer has clicked effect. – VahidShir Jan 29 '18 at 10:05
  • So there is no proper solution? It would be fine to create a Converter, to convert the selected Font Icon into an Image Source... – Gold.strike Jan 29 '18 at 10:37
  • There is a "View" control that can contain a Grid. Otherwise use directly the Grid control. Yes, there isn't a "click effect" but I think you can try to recreate it changing background color – Alessandro Caliaro Jan 29 '18 at 11:23