Font Awesome – Xamarin.Forms

Neste post irei demonstrar como você pode utilizar Font Awesome em suas aplicações Xamarin.Forms.

No momento em que escrevo este post o Font Awesome encontra-se em sua versão 5.0.13, então por isso esta versão será utilizada neste exemplo.

 

Download

O primeiro passo é acessar o site do Font Awesome e realizar o download do arquivo de fontes clicando em “Download Free” como demonstrado na imagem a seguir.

Site: https://fontawesome.com

1

 

Descompacte o arquivo .zip onde preferir.

2

O arquivo que nos interessa é o arquivo de fonte, com a extensão “.ttf” que encontra-se no seguinte caminho de pastas: “fontawesome-free-5.0.13\web-fonts-with-css\webfonts“.

Android

Em seu projeto .Android, adicione o arquivo dentro da pasta Assets, como demonstrado na imagem a seguir.

3

iOS

Em seu projeto .iOS, adicione o arquivo dentro da pasta Resources, como demonstrado na imagem a seguir.

4

Info.plist

No arquivo Info.plist referencie o arquivo de fontes como demonstrado a seguir.

info

 

Xaml

Utilize ” &#x ” acompanhado do Unicode do ícone desejado  e  OnPlatform para definir a FontFamily de acordo com cada plataforma, como demonstrado a seguir.

<?xml version="1.0" encoding="utf-8" ?>
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
xmlns:local="clr-namespace:FontAwesomeDemo"
x:Class="FontAwesomeDemo.MainPage">
<StackLayout VerticalOptions="CenterAndExpand">
<Button Text="&#xf007;" FontSize="36">
<Button.FontFamily>
<OnPlatform x:TypeArguments="x:String" Android="fa-solid-900.ttf#Font Awesome 5 Free Solid"
iOS="Font Awesome 5 Free"/>
</Button.FontFamily>
</Button>
<Label Text="&#xf007;" FontSize="36" HorizontalTextAlignment="Center">
<Label.FontFamily>
<OnPlatform x:TypeArguments="x:String" Android="fa-solid-900.ttf#Font Awesome 5 Free Solid"
iOS="Font Awesome 5 Free"/>
</Label.FontFamily>
</Label>
</StackLayout>
</ContentPage>

view raw
MainPage.xaml
hosted with ❤ by GitHub

Resultado

 

screenshot-15291168720892018-07-11_03-42-04-

 

 

 

 

 

 

 

 

 

 

 

 

 

Esse e todos os exemplos deste blog encontram-se disponíveis no GitHub.

icongithub

4 comentários em “Font Awesome – Xamarin.Forms

  1. Juliano, se eu quiser usar icones fontawesome com controles Image, como faço, uma vez que não existe a propriedade FontFamily nesse controle ?

    Curtir

    1. Olá Marcelo, você terá que utilizar Custom renderer.
      Porém, ao invez de utilizar um controle Image, recomendo você utilizar Label.
      Espero ter ajudado 🙂

      Curtir

  2. Juliano, quando eu incluo a linha do e mando rodar no meu celular por USB, a depuração demora bastante tempo pra acontecer e termina em uma Unhandled Exception: Java.Lang.RuntimeException: .
    Já testei sem a linha do OnPlatform e o programa rodou (sem o ícone, é claro), mas ao incluir essa linha acontece essa exceção. Estou usando a mesma versão do fa do artigo (5.0.13) e coloquei os arquivos nas mesmas pastas. Consegue me ajudar?

    Curtir

Deixe uma resposta para Gabriel Theodore Cancelar resposta

Preencha os seus dados abaixo ou clique em um ícone para log in:

Logotipo do WordPress.com

Você está comentando utilizando sua conta WordPress.com. Sair /  Alterar )

Foto do Google

Você está comentando utilizando sua conta Google. Sair /  Alterar )

Imagem do Twitter

Você está comentando utilizando sua conta Twitter. Sair /  Alterar )

Foto do Facebook

Você está comentando utilizando sua conta Facebook. Sair /  Alterar )

Conectando a %s