Achraf Ben Alaya
No Result
View All Result
  • Home
  • News
  • Blog
    • blazor
    • c#
    • Cloud
      • Azure
    • docker
    • sql
    • xamarin
    • Dapr
    • Tricks, Tips and Fixes
    • General Tips & Fix
  • AI
  • Cloud
  • Motivation
  • Courses
  • About
    • Resume
    • Privacy Policy
SUBSCRIBE
  • Home
  • News
  • Blog
    • blazor
    • c#
    • Cloud
      • Azure
    • docker
    • sql
    • xamarin
    • Dapr
    • Tricks, Tips and Fixes
    • General Tips & Fix
  • AI
  • Cloud
  • Motivation
  • Courses
  • About
    • Resume
    • Privacy Policy
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
893
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

AI

Model Context Protocol (MCP): The Future of AI Integration

April 21, 2025
94
Azure

Step-by-Step Guide: Azure Front Door + Storage Account Static Website + Custom Domain with Terraform

March 11, 2025
212
Network Security & Route Tables – Checking NSGs, route tables, and service endpoints for a targeted VNET or Subnet
Azure

Network Security & Route Tables – Checking NSGs, route tables, and service endpoints for a targeted VNET or Subnet

February 3, 2025
132
Understanding Generative AI and RAG Benefits
AI

Understanding Generative AI and RAG Benefits

January 12, 2025
95
Azure Communication Services Email Sending Simplified: From Setup to Execution and Monitoring
Azure

Azure Communication Services Email Sending Simplified: From Setup to Execution and Monitoring

December 8, 2024
1.5k
PowerShell Automation for Azure Networks: Detailed VNET and Subnet Analysis
Azure

PowerShell Automation for Azure Networks: Detailed VNET and Subnet Analysis

November 2, 2024
495
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

Azure Function to Upload Data to Azure Blob

Azure Function to Upload Data to Azure Blob

August 29, 2020
3.4k
Achraf First Post

Achraf First Post

April 26, 2020
406
Setting up Serilog in ASP.NET Core

Setting up Serilog in ASP.NET Core

September 15, 2020
3k
Azure Static Web App Service

Azure Static Web App Service

September 27, 2020
1.1k
Win free certifications at the Microsoft Build Cloud Skills Challenge | May 2022 🎁

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

May 28, 2022
255
Migrate and modernize your applications on Azure

Migrate and modernize your applications on Azure

March 26, 2021
562
Facebook Twitter LinkedIn Youtube

Model Context Protocol (MCP): The Future of AI Integration

April 21, 2025

Step-by-Step Guide: Azure Front Door + Storage Account Static Website + Custom Domain with Terraform

March 11, 2025
Network Security & Route Tables – Checking NSGs, route tables, and service endpoints for a targeted VNET or Subnet

Network Security & Route Tables – Checking NSGs, route tables, and service endpoints for a targeted VNET or Subnet

February 3, 2025

Categories

  • AI (2)
  • Apps (1)
  • Azure (63)
  • blazor (2)
  • Blog (91)
  • c# (7)
  • Cloud (65)
  • Courses (3)
  • Dapr (4)
  • docker (4)
  • Games (1)
  • General Tips & Fix (1)
  • Home (1)
  • Kubernetes Service (AKS) (1)
  • motivation (2)
  • Motivation (3)
  • News (9)
  • Resume (1)
  • sql (4)
  • Terrafrom (1)
  • Tricks, Tips and Fixes (4)
  • xamarin (5)
No Result
View All Result
  • Home
  • News
  • Blog
    • blazor
    • c#
    • Cloud
      • Azure
    • docker
    • sql
    • xamarin
    • Dapr
    • Tricks, Tips and Fixes
    • General Tips & Fix
  • AI
  • Cloud
  • Motivation
  • Courses
  • About
    • Resume
    • Privacy Policy