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
896
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
133
Azure

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

March 11, 2025
272
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
141
Understanding Generative AI and RAG Benefits
AI

Understanding Generative AI and RAG Benefits

January 12, 2025
98
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.6k
PowerShell Automation for Azure Networks: Detailed VNET and Subnet Analysis
Azure

PowerShell Automation for Azure Networks: Detailed VNET and Subnet Analysis

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

Migrate and modernize your applications on Azure

Migrate and modernize your applications on Azure – Part 2.0 (Azure Functions)

April 3, 2021
544
Hello Microsoft Graph !

Hello Microsoft Graph !

February 25, 2021
526
Migrate and modernize your applications on Azure – Part –1 (Migrate Database)

Migrate and modernize your applications on Azure – Part –1 (Migrate Database)

April 3, 2021
320
How to make the most of each day

How to make the most of each day

February 2, 2021
318
Reflecting on a Year of Growth: 2023 in Review

Reflecting on a Year of Growth: 2023 in Review

December 31, 2023
377
Microsoft Ignite Cloud Skills Challenge November 2021 :  Learn…and get rewarded (only 3 days left)

Microsoft Ignite Cloud Skills Challenge November 2021 : Learn…and get rewarded (only 3 days left)

November 27, 2021
292
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