.NET Maui Apps | How to use Font Awesome Icons in NET MAUI Mobile and Desktop applications.

Hello friends and everyone  welcome back to Netflix Channel   this video we are going to talk about how to use  Font awesome in dot net marry in the front awesome   contains fonts such as an icon that we can use  in application so before we can have an icons in   this application we have to configure that so  that is what we're going to have a look today   now this channel facilitates a lot of project and  lessons concerning.net marry and also Blazer as   web assembly so you can just change the channel  playlist we have a lot of videos that you can take   let's get going to our today's topic so first of  all we have to download the font awesome or the   font from the formed awesome.com so let's  launch a browser and now let's get going so I will go to font awesome .com so let's click on start for free and  maybe we can have this or go to the icons so let's actually go to download and we have this so we can download for web or  for free for desktop so let's download it and   let's all download this for web so you can  and the version here that is the 6.4 .2 so   that is it now as you can see it is in the zip  file so we go in there and I try to zip it and   zip it to have the collection so let's do that  so now when you come to the folder you can see   we have these two files here I intentionally  downloaded the chip because I want to show   you something now you see when you go to our  projects and when you go to my program.cs file   you could see that the font  are some extension here is what   Dot ttf now so we have to locate a font awesome  in this uh zip files which have the extension   of what ttf let's try the first one and see  so we're going to extract this and when we   are done you're going to extract the second one  too and see so let's also extract this as well so this is done let's close this one and let's  wait for this to finish so the first one that is   the desktop is done let's open this and see now  when you open this folder let's open it again okay so you see we are not having we have the  metadata we have the OT FS so when you open   all this files you see all these are font and some  Brands but the extension here is the otfs and now   we need an extension of ttf so this is extension  that we need ttf so let's see let's go to the other one and let's also open it and  see so we can open this and let's go to the   web font so you can see the word font this has  a font brand and that is a 400 here you see the   extension there is what when the open check  the property of this you can see it is a ttf   now when you check that property for these  two it is also the ttf okay so it is what   you're going to do now you have all the  web fonts over here so let's copy this   or you can open this here so  let's open this maybe in Sublime   to see what we have what we have in so this  is what we have for the font Brands over here   so with this we want to convert  this okay so let's convert this to a c sub code maybe you can see we have  solid we have the fa solid we have regular   and this is a brand so all this you can  decide to add all of these to a class   okay now what can we do we can just grab this  this and that you can grab any of this or you   can grab all which have the extension of ttf  and now paste them into a font folder in this   so let's see how we're going to do let's press  do one because you want to just use this as an   example so let's copy the font brand so  we're going to copy this and I go to our   font folder and now let's paste this here  let's register this so we're going to open   let's create a copy of this and we paste it so  let's edit rename this so we can copy the name now   let's come here and let's paste it and let's give  it a family name so that is a font awesome okay   now once you're done with this we have to convert  this brand to C sharp code so when you go to a web so in here you can check convert for convert icons  font to C sharp code and we can go for this link   so let's wait for this link to open and we are  going to upload okay so that is this one now   let's go for icon 40 code and now in here we have  to browse for our font awesome code so let's see   now let's go for that is a  web font another the first one   so we have this and as you can see we  have the code here so let's grab all this so the font have been converted to the C sharp  crew let's copy this let's go to our project   let's create um a folder here and let's name  it as maybe models let's create a class in it   so add a class and this class let's make  it as icons so let's set this to public   and static now let's paste this here so we save  this so let's go to our page that's the main page   and add the the model extension here so XM and  S and now we say models then CR Dash namespace   so demo Dash models and now let's create a label  so let's use the font here let's create label and now this label we're going to say font family  so the font for me that we're going to use it is   a name that we gave it to the Elias name that  the font has some so we can grab this and we go   to our program or our page here we paste this and  now let's go for the test so the test here we're   gonna use a static files and here we want to get  an icon so you know we have an icon folder here   so before we do that let's specify our models  first then we can have our icons dot so let's   go for Facebook so this is the first icon that we  are using and maybe we can have um test color so   let's test color here let's set you blue maybe  you can go for let's grab this and paste it so maybe with this you can cut this and set up a  horizontal stack layout and we can paste this here so let's increase the weight request maybe you say 100 and let's set the height request  also to 100. now let's use same to this so let's copy this let's paste it here  and unless you see so with this we're   not going to use Facebook you want to use  YouTube and you know let's add this to red and the last one you can use  maybe tick tock and that's also to   red now let's save this  let's build this application   all right so you see that our app is now built and  we have the icons over here so that is a way to   add fonts are awesome to the Mario project now the  next thing is if you want to add you can see from   when we go to a folder we have this regular NSO  solid so all these are also icons now you can also   grab this and then add it to the same class  and register it in the my program you can use   the same step that we did or we followed to  add this icon you can do the saved into this   okay so that is it for this video if you like what  I'm doing you can give me thumbs up subscribe to   the channel as I said earlier on we have a lot of  lessons and projects in the playlist so check the   playlist and you're gonna have informative  lessons thank you and see you in the next

Channel: Netcode-Hub

Views: 526

Keywords: skip(), scaffolding, assign-role, mobile apps, maui app, mobile app, desktop app, create app, android, apk, applications, MSIX, poweshell, cli, command-prompt, google api key, map key, google map api key, cloud key, direction, maps, integrate map, desktop application, google map.api key, api key, context menu, navigation service, nivigate trough content pages using navigation service, How to use Font Awesome in NET MAUI Mobile and Desktop applications., fontawesome, icons

Id: _Xp3HwH4DUg

Length: 10min 16sec (616 seconds)

Published: Mon Aug 07 2023