Achraf Ben Alaya
No Result
View All Result
  • News
  • Blog
    • blazor
    • c#
    • Cloud
      • Azure
    • docker
    • sql
    • xamarin
    • Dapr
    • Tricks, Tips and Fixes
  • Cloud
  • Motivation
  • General Tips & Fix
  • Exam Preparation
    • AZ-104
    • AZ-400
  • About
    • Resume
SUBSCRIBE
  • News
  • Blog
    • blazor
    • c#
    • Cloud
      • Azure
    • docker
    • sql
    • xamarin
    • Dapr
    • Tricks, Tips and Fixes
  • Cloud
  • Motivation
  • General Tips & Fix
  • Exam Preparation
    • AZ-104
    • AZ-400
  • About
    • Resume
No Result
View All Result
Achraf Ben Alaya
No Result
View All Result
ADVERTISEMENT
Home Blog

Font Awesome ,Bootstrap and Material Font Icons For Xamarin.Forms

achraf by achraf
April 26, 2020
in Blog, xamarin
3 min read
0
Font Awesome ,Bootstrap and Material Font Icons For Xamarin.Forms
0
SHARES
578
VIEWS
Share on FacebookShare on Twitter

Font Awesome ,Bootstrap and Material Font Icons For Xamarin.Forms July 21, 2019 by ben2code My entire time , using xamarin forms to develop mobile applications , I was using Images and specific Icons. I was generating those icons using google Asset Studio .

Well , that was helpful , but there was a lot of waste of time even if google asset studio was there for us . I mean , choosing the right picture , using the google asset studio to generate pictures for @1x, @2x, @3x, hdpi, xhdpi, xxhdi , later adding those picture to each folder and If you didn’t like the picture you should generate new ones.

What about one file and one source ? A file that contains a lot of icons that you can access them with a specific code.

In font awesome you can find more than 1500 free icons that you can use .

In this article , we will not only use font awesome , but we are going to use Bootstrap and Material Font Icons too and we are going to see :

How to get the Fonts . How to add the fonts to Xamarin.Forms Project . How to use Xaml to call the fonts . Demo APP with Source Code . How to get the Fonts First we are going to get the font awesome Font , from this Link you can download the zip file , extract it and get the otf file . Next , we are going to download glyph icons file ” glyphicons-halflings-regular.ttf ” from this Link . Finally we get Material design font icons from this Link.

Now if you have those 5 files , like in picture below , you are ready for the next step .

Adding the fonts to Xamarin.Forms Project Now , after getting our files , we need to place them in :

Android: Make sure to paste those file to Assets folder .

UWP : Make sure to paste those file to Assets folder .

iOS : Make sure to paste those file to Resources folder and edit the info.plist file by adding :

Using Xaml to call the fonts Now lets start using our fonts in Xaml , first , we are going to use font awesome . now , let’s get the font that we need to use by copying the code like in the picture below

Now all you have to do is to past that code between &#x and (😉 just like in the picture below inside Text, and as you can see , you can specify font size too .

Now ,let’s use Material Design , and for that we are going to use a website to get the codes that we are going to use for our font as the past example . You need to upload the Material design file to this website to get the Icons like this :

Last we are going to use Bootstrap , for that I used w3schools to get all the font as you can see .

and simply , you should just use the code you found in there and place it inside Text .

and simply after doing these steps , you can see inside your app icons like in this demo

You can read more about Using Font Icons in this blog post by James Montemagno .

You can get the full code source from thins link .

 

ShareTweet
Previous Post

Sql tips and tricks

Next Post

Animations with Lottie in Xamarin Forms

Related Posts

Switch to Azure Container Registry from Docker Hub
Azure

From Docker Hub, switch to Azure Container Registry & AKS

January 16, 2023
132
How to setup nginx reverse proxy && load balancer for aspnet core apps with Docker and azure kubernetes service (AKS)
Azure

How to configure an ingress controller using TLS/SSL for the Azure Kubernetes Service (AKS)

November 25, 2022
229
How to setup nginx reverse proxy && load balancer for aspnet core apps with Docker and azure kubernetes service (AKS)
Azure

How to setup nginx reverse proxy && load balancer for aspnet core apps with Docker and azure kubernetes service (AKS)

November 23, 2022
102
How to setup nginx reverse proxy for aspnet core apps with and without  Docker compose
Azure

How to setup nginx reverse proxy for aspnet core apps with and without Docker compose

November 23, 2022
153
Win free certifications at the Microsoft Build Cloud Skills Challenge | May 2022 🎁
Blog

Win free certifications at the Microsoft Build Cloud Skills Challenge | May 2022 🎁

May 28, 2022
107
Generating report for SSL Certificates for Websites with PowerShell
Azure

Generating report for SSL Certificates for Websites with PowerShell

April 10, 2022
386
Next Post
Animations with Lottie in Xamarin Forms

Animations with Lottie in Xamarin Forms

Leave a Reply Cancel reply

Your email address will not be published. Required fields are marked *

Terraform

Certifications

Microsoft certified trainer (MCT)

Recommended

You forget to shutdown your virtual machine on your way home ? send an email and save your time

You forget to shutdown your virtual machine on your way home ? send an email and save your time

February 6, 2021
322
Setting up Serilog in ASP.NET Core

Setting up Serilog in ASP.NET Core

September 15, 2020
1.7k
Finally a stable version of Xamarin.Forms 4.1.0 and announcing Xamarin.Essentials 1.2

Finally a stable version of Xamarin.Forms 4.1.0 and announcing Xamarin.Essentials 1.2

April 21, 2020
378
Installing WordPress with docker image of XAMPP

Installing WordPress with docker image of XAMPP

April 21, 2020
665
Xamarin.forms,Blazor and Web API

Xamarin.forms,Blazor and Web API

December 3, 2020
927
Welcome to Azure Resource Mover service

Welcome to Azure Resource Mover service

February 2, 2021
149
Facebook Twitter LinkedIn Youtube
Switch to Azure Container Registry from Docker Hub

From Docker Hub, switch to Azure Container Registry & AKS

January 16, 2023
How to setup nginx reverse proxy && load balancer for aspnet core apps with Docker and azure kubernetes service (AKS)

How to configure an ingress controller using TLS/SSL for the Azure Kubernetes Service (AKS)

November 25, 2022
How to setup nginx reverse proxy && load balancer for aspnet core apps with Docker and azure kubernetes service (AKS)

How to setup nginx reverse proxy && load balancer for aspnet core apps with Docker and azure kubernetes service (AKS)

November 23, 2022

Categories

  • Apps (1)
  • Azure (39)
  • blazor (2)
  • Blog (62)
  • c# (7)
  • Cloud (37)
  • Dapr (4)
  • docker (3)
  • Games (1)
  • General Tips & Fix (1)
  • Motivation (3)
  • motivation (2)
  • News (9)
  • Resume (1)
  • sql (4)
  • Tricks, Tips and Fixes (3)
  • xamarin (5)
No Result
View All Result
  • News
  • Blog
    • blazor
    • c#
    • Cloud
      • Azure
    • docker
    • sql
    • xamarin
    • Dapr
    • Tricks, Tips and Fixes
  • Cloud
  • Motivation
  • General Tips & Fix
  • Exam Preparation
    • AZ-104
    • AZ-400
  • About
    • Resume