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 um comentário

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