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
Descompacte o arquivo .zip onde preferir.
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.
iOS
Em seu projeto .iOS, adicione o arquivo dentro da pasta Resources, como demonstrado na imagem a seguir.
Info.plist
No arquivo Info.plist referencie o arquivo de fontes como demonstrado a seguir.
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="" 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="" 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> |
Resultado
Esse e todos os exemplos deste blog encontram-se disponíveis no GitHub.
Juliano, se eu quiser usar icones fontawesome com controles Image, como faço, uma vez que não existe a propriedade FontFamily nesse controle ?
CurtirCurtir
Olá Marcelo, você terá que utilizar Custom renderer.
Porém, ao invez de utilizar um controle Image, recomendo você utilizar Label.
Espero ter ajudado 🙂
CurtirCurtir
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?
CurtirCurtir
Olá Gabriel,
Você poderia me mostrar o código e a stack trace para que eu possa te ajudar ?
CurtirCurtir