Icon fonts contain symbols instead of numbers and letters.In Web technology, icon fonts dominate over other image formats.Because they are vector graphics, they are small and easy to load, so users can zoom up and down without compromising quality.But the only limitation is that a single icon can only be drawn in one color.

I'm sure every little buddy will often have the question: Can I use icon fonts in desktop applications like Essential Studio for Windows Forms?The answer is yes!This article will explain the specific operation method for you.

First, keep in mind that in the case of DPI, we only need to change the font size, not maintain different sizes of images for different DPI scales.

How to add and draw icon fonts

The fonts commonly available on the system (such as Arial, Times New Roman) may not have the icons we need in our applications, but there are many online and offline applications that support creating icon fonts.Syncfusion provides an offline tool called Metro Studio for free.

For demonstration purposes, we created a.ttf file that contains a font family called WF Fabric.The result icon is shown below.

Delta Icon font from WF Fabric.ttf file

*Note: The Unicode (e700, e701, etc.) shown in the figure above represents the corresponding glyph when drawn in the application.

Include the WF Fabric.ttf file in the WinForms application and mark its Build Action as Embedded Resource in the properties dialog box.

Delta WF Fabric.ttf file marked as embedded resource

Includes code to register icon fonts in system memory during form initialization.Like other fonts (Arial, Times New Roman, and so on), WF Fabric will also be registered in the system memory of Control Panel\All Control Panel ItemsFonts.

public Form1()<font></font>
{<font></font>
    InitializeComponent();<font></font>
    this.Paint += Form1_Paint;<font></font>
}<font></font>
<font></font>
private void Form1_Paint(object sender, PaintEventArgs e)<font></font>
{<font></font>
    PrivateFontCollection pfc = new PrivateFontCollection();<font></font>
    //Extracting icon fonts from the WF Fabric.ttf file and adding into system memory.<font></font>
    Stream fontAsStream = this.GetType().Assembly.GetManifestResourceStream("WindowsFormsApp1.WF Fabric.ttf");<font></font>
    byte[] fontAsByte = new byte[fontAsStream.Length];<font></font>
    fontAsStream.Read(fontAsByte, 0, (int)fontAsStream.Length);<font></font>
    fontAsStream.Close();<font></font>
    IntPtr memPointer = System.Runtime.InteropServices.Marshal.AllocHGlobal(System.Runtime.InteropServices.Marshal.SizeOf(typeof(byte)) * fontAsByte.Length);<font></font>
    System.Runtime.InteropServices.Marshal.Copy(fontAsByte, 0, memPointer, fontAsByte.Length);<font></font>
    pfc.AddMemoryFont(memPointer, fontAsByte.Length);<font></font>
}<font></font>

It plays a crucial role.The Families property in the pfc object will save the saved font family name.As mentioned above, we created WF Fabric.ttf, whose font family name is WF Fabric. Download the latest version of Essential Studio for Windows Forms

Now create an enumeration that contains all icon fonts with the appropriate names and specifies the prefix 0x for their Unicode.Therefore, wherever you draw using icon fonts, Unicode will be converted to a string and passed as a parameter to the DrawString method.

public partial class Form1 : Form<font></font>
{<font></font>
    public Form1()<font></font>
    {<font></font>
        InitializeComponent();<font></font>
        this.Paint += Form1_Paint;<font></font>
    }<font></font>
<font></font>
    private void Form1_Paint(object sender, PaintEventArgs e)<font></font>
    {<font></font>
        PrivateFontCollection pfc = new PrivateFontCollection();<font></font>
        //Extracting icon fonts from the WF Fabric.ttf file and inserting into system memory.<font></font>
        Stream fontAsStream = this.GetType().Assembly.GetManifestResourceStream("WindowsFormsApp1.WF Fabric.ttf");<font></font>
        byte[] fontAsByte = new byte[fontAsStream.Length];<font></font>
        fontAsStream.Read(fontAsByte, 0, (int)fontAsStream.Length);<font></font>
        fontAsStream.Close();<font></font>
        IntPtr memPointer = System.Runtime.InteropServices.Marshal.AllocHGlobal(System.Runtime.InteropServices.Marshal.SizeOf(typeof(byte)) * fontAsByte.Length);<font></font>
        System.Runtime.InteropServices.Marshal.Copy(fontAsByte, 0, memPointer, fontAsByte.Length);<font></font>
        pfc.AddMemoryFont(memPointer, fontAsByte.Length);<font></font>
<font></font>
        //Icon font's unicode "0xe700" is converted to string and drawn using e.Graphics with WF Fabric set as font family. <font></font>
        string iconChar = char.ConvertFromUtf32(IconFont.LastArrow);<font></font>
        Font iconFont = new Font(pfc.Families[0], 18.5f, FontStyle.Bold);<font></font>
        e.Graphics.DrawString(iconChar, iconFont, new SolidBrush(Color.Orange), new PointF(10, 10));<font></font>
<font></font>
        //Icon font's unicode "0xe710" is converted to string and drawn using e.Graphics with WF Fabric set as font family.<font></font>
        iconChar = char.ConvertFromUtf32(IconFont.Plus);<font></font>
        e.Graphics.DrawString(iconChar, iconFont, new SolidBrush(Color.Red), new PointF(40, 40));<font></font>
<font></font>
        //Icon font's unicode "0xe720" is converted to string and drawn using e.Graphics with WF Fabric set as font family.<font></font>
        iconChar = char.ConvertFromUtf32(IconFont.Paint);<font></font>
        e.Graphics.DrawString(iconChar, iconFont, new SolidBrush(Color.Green), new PointF(70, 70));<font></font>
    }<font></font>
}<font></font>
<font></font>
public static class IconFont<font></font>
{<font></font>
    //0xe700, 0xe710, 0xe720 - are icon font's unicode from the WF Fabric.ttf file.<font></font>
    public static int LastArrow = 0xe700;<font></font>
    public static int Plus = 0xe710;<font></font>
    public static int Paint = 0xe720;<font></font>
}<font></font>

It's time to apply icon fonts in real-world scenarios.We have prepared a simple demonstration showing navigation icons for the first, last, previous, and next pages drawn on a custom button control.

Reference examples: Use icon fonts to render icons on WinForms button controls

Delta Custom button controls drawing icon fonts and text inside

The advantages of using icon fonts are:

• Improved rendering quality for all font sizes;

• Reuse individual icon fonts by changing colors to different themes and skins;

• Reduce application size by not having to maintain different image sizes relative to DPI scaling;

• Add multiple icon fonts and connect icon fonts with letters, numbers, and symbols.