Custom Fonts & Font Icons/Images in Xamarin.Forms

today i'm going to show you how to use custom fonts in your application in just one line of code and how to use font icons to replace all of those images with glyphs so tune in [Music] hey everyone i'm back with another xamarin 101 video i've been building out this coffee application here on my youtube channel from scratch all the way up to hopefully putting it into the app store if you've missed any of the previous videos check them out right over there somewhere or down in the show notes there's a whole playlist of all the great 101 videos and i've been getting a lot of questions from all of you in the comments and kind of recommending what you want to see next and as you start to build out your application you run into a few things one you're using sort of built-in fonts for ios android and windows and maybe you want custom fonts or you want to kind of spice it up a little bit and then additionally you have a lot of images in your application and sure wouldn't it be nice to use one of those really fancy font packs that have icons in them like font awesome or ionized or material fonts or all these other ones ionic icons or ion icons whatever it is i can't figure it out but what we're going to do today is show you how to set that up in xamarin forms because it just takes a few lines of code so let's check it out so i actually wrote a blog post a while ago called xamarin forms custom fonts simplified everywhere in fact i've written like 20 blog posts on font icons and images it's kind of changed over the years so it's actually really really easy to get it into your xamarin forms applications the easiest effort it's so simple with xamarin forms five and additionally with dotnet maui coming this fall it'll be even easier it'll just drop a font into a font folder and then you'll be done but it's actually really really similar here in xamarin form so i'm going to show you this here now there are a lot of different fonts out there i mentioned font awesome that's one that i use in a lot of my applications there's free and paid versions there's ion ion icons the one that i can't pronounce there's material icons there's um fluent icon packs out there basically what you're looking for if you go over here to font awesome and go to the download page is you're looking for like the free desktop otf or ttf file so you want to download that to your to your desktop wherever you want and of course you want to look at the licenses you want to make sure everything is proper there so what does this thing look like these icons that are in here well the cool part here is you can actually just go in and search and say coffee for example and you can see that on this page just pump it up a little bit there's a bunch of different coffee that's available but you'll probably want to click on free okay so we have coffee and coffee mug and there's all sorts of different packs the ones that they give you are solid regular and brands so those are kind of like the filters you want to put and there's a coffee here now when you tap on that coffee you get the class but you also get the unicode character right here that represents this specific um icon and on the right hand side they'll tell you what is available and the free it's only the solid version you don't get regular you don't get light you don't get duo tone so kind of be aware of what's available in that pack and apparently now brewing funnily enough is alpha six i think i have font icon fives over here you can also take any ttf otf over here and you can actually open it up in this really cool andre made this icon font to code and here you can actually go ahead and select let's say here's that font awesome solid file it'll load that entire thing up and give you an entire file of every single thing in it this is actually really neat so everything is right here for all your font icon fonts and this gives you the c sharp you can rename the classes you can do everything here this is really neat for all of those unicode characters and you can even select them so if you only want a few of them you can come in and put them in here which is really nice so you kind of see this here additionally matthew over here who does m fracture and a bunch of awesome work in the community has this github repo fa2cs he also has one for the uh where's the material design icons but for all intents and purposes what it is is it is a cs file over here that you can just grab and drop into your code and it gives you all of them it gives you all the free ones so you get the um links to all of them you get like this really nice like what each font supports here the except the unicode character links to all of them it's all automatically generated for you so you can see like oh i want to use acorn but it's not actually available i need the pro versions of these so this will give you every single font under the sun but it's one big file which is cool we're going to use this actually so we'll copy this in a second let's go back over to our project first and what we need to do is get our icons in to the app so what we're going to do here is i'm going to come into my project i'm going to add a new folder and i'm going to say resources i'm then going to come into that folder and add another folder called fonts it's kind of like to do my resources fonts images translations things like that and this is in my shared code this is my.net standard library it's right there so then what i'm going to do is i'm going to open up my downloads folder there it is and i have four fonts okay i actually have a custom font this is an animal crossing style themed font that i paid for off of fiverr i'll put a link to my fiverr account if you're interested in getting custom fonts built or anything built uh over there but i have this and you can actually see it here it's kind of like an animal crossing ask style and then i have all the the font awesome ttfs that we downloaded so i'm just going to drag and drop them into visual studio and then i'm going to highlight all four of these and open up the property pane okay so we have this over here so let's go and drag this out a little bit so my head doesn't cut it off and we're just going to zoom in here so i highlight all four of them and we can note the build action is none so what we need to do is highlight all of our fonts and we're going to set those over here to embedded resource all right so embedded resource is going to give us the ability to embed that into the dll so xamarin forms can do all the magic it needs to do under the hood to load that font specifically for ios or android or however uh whatever platform you're running on there and that's it you pretty much have it ready to go now at this point there is one other thing you need to do if you're in a newer project you'll see this assembly info.cs if you don't have one you can just create a file called assemblyinfocs or put code in the the top above a namespace here in your app.xaml.cs basically these are like global exports and in fact what you see here is this compile flag to compile your xaml and that's what you know kind of are these assembly exports which are really nice so the other thing we're going to do here is put another assembly export this is for the font specifically i'm going to say export font okay and this is going to be inside of the xamarin forms namespace let's go ahead and pull that in there we go and this font is going to take in two things it's going to take in a font file name and an alias and there's also this embedded font resource id i've never actually used that i don't know what it's for so i'll link to the documentation that definitely explains it more uh but i think that's if the font name or has the font has a special embedded id or something it'd be kind of weird so what we're going to do here is we're going to take a look at our fonts again and we're going to put the name in there so let's do the first one and i'm going to call it custom font.ttf if it's an otf whatever it is put that there and then i love using an alias because an alias is going to be what we specify in our xaml or in our code as the font family name so i'm going to call this ac for animal crossing so that's going to be our animal crossing font that we have there and that should be it oh i just need to do this i need to do alias equals sorry about that there we go alias equals because there's two strings we need to specify which one we're setting there so ac has it now for the fonts we can also just go ahead and do the same thing i'm going to copy and paste it here i'm just going to make this a little bit easier so we have font awesome regular font awesome solid font awesome brands and again there's a line up over here fa regular 400 900 400 so whatever the name of the file is based on whatever you downloaded from the font awesome website so kind of be aware of that all right so at this point we're kind of ready to roll what we're going to do next is grab this font awesome cs file and i'm just going to put it inside of let's put inside of a new folder i'll call it helpers over here and we'll call it font awesome font awesome so we'll do new class font awesome and i'm just going to copy and paste the whole thing now it is 20 000 lines of code it is quite large but it is just text so hopefully it won't be too bad but it's all there and we'll see why we use this file instead of kind of copying and pasting this code in manually okay so let's go ahead and boot this up and now since we have all of our images in there we have all of our helper stuff in our font awesome file we don't need to do anything else we can use xaml hot reload to just kind of do everything inside of the application so the first thing that we're probably going to want to do is update and use that custom font so if we remember if we look at my coffee app over here we have like a fly out we have a break point let's go ahead and continue on and we have a a fly out here that says equipment cv my coffee internet coffee so we want to update this icon which is an image but also let's just go ahead and update these fonts here for like coffee of the world for example so let's go into that coffee equipment page and i can go down into this header here and we can see that we have this label that says copies of the world all right so now all i need to do let's just first do a font size and let's do large here that way it's a little bit larger and then now all i need to do is say font family and say a c and hit save there and now we have the animal crossing font right there should be able to put a margin in here maybe of 20 does that work there we go perfect coffee coffee coffees of the world there we go so now we have this custom animal crossing font like that that's just really really cool now if you download some fonts let's say from like open fonts or the google fonts and you put them into your app also be aware if you want to use these font attributes let's say like bold for example if you don't install the bold font it's not going to be available so you also want to be aware of the different attributes and make sure that the fonts are bundled into a single font or that you include that font into your app which is also very important there so there we go so there's literally our coffee okay so now maybe we don't want this to be like coffees of the world maybe we want it to be like the icon of a coffee cup so you have all the coffees below it so we want to use that font awesome icon so let's head back over to our font awesome page and we can note this fo f4 over here right so there's a few ways of putting it into the code the first way that we could do this is actually go into our global resources and create a string so if you actually watched my previous video on resources and reusable styles i mentioned you can put colors and styles and reusable assets you can actually put strings or integers or anything in here so what you could do is you could put a key in here and say icon coffee for example and then give it a key now this is actually really important this unicode key when you put it in the xaml has special syntax so what you actually need to do is you need to put an ampersand and then oops you need to put an ampersand right in front of it which is right there a hash and then x and at the end you're going to put this this is an escaping of this unicode character to put it into it's just a special syntax it's exactly what kind of you kind of just learned throughout the process of if you're going to put it as a static resource you're going to put it here and the reason for that is because if we look in that font awesome over here we look at the actual unicode value the unicode value is forward slash or backslash u so what we see in this app xaml over here is that this is actually that representation of it and then you need this escaping here to actually get that forward slash u but in a static resource which is important if you're doing it in code behind you just put the forward slash or backslash u and then the rest of the code here so now that we have this in here as the icon coffee we could actually come back over here and remember that this is font awesome solid and then now for our text we can say static resource icon coffee and then we get a coffee cup so there you go you now have a font icon right there that you're using um instead of that custom font we're using this icon not an image it's right there now you can use font icons pretty much anywhere anywhere that a font family exists you can use it on a label on a button you can use it on an image actually you can use a thing called a font image source which i'll show off next but you may not want to copy and paste all of these strings you said james you know we have this awesome font awesome thing right here how do we use that and actually it makes it really easy so what we're going to do is we're going to go up to the top bring in a new name space xmlns and i'm going to say font awesome i'm going to say font assam and then it fills it in for me right there so we just imported this namespace of font awesome and we can then use all the cool stuff here so inside of xamarin.forms there is actually a way to get access to all of those resources that are static that aren't in your app dot xaml and we actually call these um [Music] x static types so x static enables me to come in and get access to all of those different resources so there's font awesome and then i can say font awesome icons dot and now if we look right here we have all of the icons with our intellisense so x static is a way to reach in to static resources that are available and i'm going to say go find the static in this namespace font awesome with the class name font awesome icons so if we correlate that here there's font awesome and here's font awesome icons you could of course shorten these two they're quite long but they're there so that's the name space and this is the name of it there so again if we now come over as long as we have that in there and say dot we have everything in here so i could of course say coffee and just like that we have our coffee available and it just continues to work so nothing nothing crazy fancy there it just kind of continues to work but if i wanted to come in and say let me see like a person is that one let's see if that works there's a person carrying going into a booth right so there's easy way of just coming in and flipping between all of these and um seeing let's see if there's a object group so there's a bunch of those you can just kind of go through them of course we're going to put it back to our copy and and go from there now remember that this font awesome.cs file has all of the things so you want to double check to make sure that you see where it's at where it's going uh et cetera et cetera but for example let's say you want to use like github for example that's in brands so we could switch this over to f8b for font awesome brands and then say github save it there now we have github in our app so maybe you have an about page you want to put all your different things there you're good to go there you go now we're back awesome okay what if you have an image or maybe you have tabs or you have these fly out items how do we get them in there actually ben over on the xamarin show did a quick video a link to that too so it kind of just walks through that for tabs and also how to do the inverse so like when things are selected what color to choose and what not that's actually quite cool but here we have the fly out so let's go ahead and implement it there what we have right now today is an icon and an icon of course is just an image however you can actually delete that and say fly out item dot icon okay and then we can specify what type of image or icon we want and what we want here is a image source so we have a file source a font source an image source a stream source a uri source what we want is an image source okay and what we're going to want here is we're going to want to specify that font family of fasts and then also we can specify that glyph now we can come in and specify the static resource of the coffee icon or we can go ahead and use that font awesome representation that i showed you earlier now when we update this we may need to reload this page here so let's go ahead and just reload this here of our app shell to see if it goes ahead and updates for us so here for equipment we should ideally see the icon coffee be represented inside of our application so let's go ahead and boot it up here and then log in and now we have our coffee cup right there now that's really really cool so replace that entire just static image with a font and if i did that throughout my entire application i no longer would have to include that image into my application it's really just that easy to get started using custom fonts and font icons in your application today to remove all of those different images you have inside your application now you may not be able to get rid of all of your images and that's okay that's not the goal but sometimes when you're creating a setting screen or you're working with tabs you just want really nice simple icons that you can put in there now nothing i think will replace custom artwork from your graphics team or something like that i think this is a great way to make your application look even better now if you have more questions of course leave them below in the comments if you really like this video give it a thumbs up that goes into the youtube algorithm of goodness and recommends it to other people that are watching you youtube stuff and puts it in if they're interested in xamarin stuff of course don't forget to subscribe and hit that notification bell so you stay up to date with all the videos i put out here so until next time i'm james [Music] you

Channel: James Montemagno

Views: 7,566

Keywords: font icons, font images, icon images, xamarin forms, forms, c#, dotnet, .NET MAUI, font to code, ios, android, uwp

Id: jZARFd8Gno0

Length: 20min 18sec (1218 seconds)

Published: Thu May 13 2021