Font Awesome – Xamarin.Forms

Publicado em por Juliano Custódio em Xamarin, 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&quot;
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml&quot;
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

Publicado por Juliano Custódio

É formado em Análise e Desenvolvimento de Sistemas pela Faculdade de Tecnologia de Sorocaba, Solutions Architect at GFT Brasil, Consultor Xamarin, Microsoft MVP, faz parte da lista de autores do Planet Xamarin, fundador da comunidade Xamarin Sorocaba, palestrante e escreve artigos sobre Xamarin.

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

    Responder

    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

      Responder

  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

    Responder

Deixe um comentário