本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《 阿里云开发者社区用户服务协议 》和 《 阿里云开发者社区知识产权保护指引 》。如果您发现本社区中有涉嫌抄袭的内容,填写 侵权投诉表单 进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。 ①字体图标其实就是把矢量图形打包到字体文件里,以后就可以像使用一般外置字体一样的使用它,因此Winform、WPF中都是可以用的。

②可以在很多地方使用图标字体,包括自定义控件、自定义样式、模板等。

③字体图标优点:

  • 字体文件非常小,比使用png等图片文件要小很多
  • 和普通字体一样,是矢量的,可任意放大缩小,且不会失真
  • 网上开源字体图标很多,很容易获取,项目开发中需要的绝大部分图标都可以找到,非常方便
  • 二、在WPF中使用字体图标

    ①获取字体图标,推荐 阿里巴巴开源字体 ,如何下载字体参考它网站的下载说明,解压下载的字体会得到以下文件:

    iconfont.tff是我们需要的字体图标库文件

    demo_unicode.html是字体库对应的字体的标识,如下图:

    以后通过使用上图红色方框中的标识,即可获得对应的字体图标

    ②将字体图标添加到项目新建的Resources文件夹中,并设置其生成操作为"Resource",如下图:

    ③定义样式

    使用TextBlock作为图标显示的容器,因此定义一个TextBlock的样式即可,如下所示。其中"SK2015"为字体名称,以前阿里巴巴开源字体库下载的时候可以修改字体名称,现在好像修改不了,默认字体名称为"iconfont",有朋友发现如何修改字体名称的话,请在下面给我留言,谢谢!

    MyIconFontStyle.xaml代码如下:

    <ResourceDictionary xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
                        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
                        xmlns:local="clr-namespace:IconFontDemo">
        <Style x:Key="iFont" TargetType="TextBlock">
            <Setter Property="FontFamily" Value="/IconFontDemo;component/Resources/#SF2015"/>
            <Setter Property="TextAlignment" Value="Center"/>
            <Setter Property="HorizontalAlignment" Value="Center"/>
            <Setter Property="VerticalAlignment" Value="Center"/>
            <Setter Property="FontSize" Value="20"/>
        </Style>
    </ResourceDictionary>
    注意: 上面的FontFamily属性也可以这样设置<Setter Property="FontFamily" Value="/Resources/#SF2015"/>
    但是为了以后将字体样式定义到另外一个程序集,还是推荐使用全的相对路径,否则会出现找不到资源的问题。
    ④在 App.xaml中引用定义的样式资源

    <Application x:Class="IconFontDemo.App"
                 xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
                 xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
                 xmlns:local="clr-namespace:IconFontDemo"
                 StartupUri="MainWindow.xaml">
        <Application.Resources>
            <ResourceDictionary>
                <ResourceDictionary.MergedDictionaries>
                    <ResourceDictionary Source="MyIconFontStyle.xaml"/>
                </ResourceDictionary.MergedDictionaries>
            </ResourceDictionary>
        </Application.Resources>
    </Application>
    ⑤在xaml中使用字体图标,MainWindow.xaml代码
    <Window x:Class="IconFontDemo.MainWindow"
            xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
            xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
            xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
            xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
            xmlns:local="clr-namespace:IconFontDemo"
            mc:Ignorable="d"
            Title="MainWindow" Height="350" Width="525" Background="Blue">
        <StackPanel Orientation="Horizontal">
            <TextBlock Text="" Style="{StaticResource iFont}" FontSize="50" Margin="3" Foreground="White"></TextBlock>
            <TextBlock Text="" Style="{StaticResource iFont}" FontSize="60" Margin="3" Foreground="SandyBrown"></TextBlock>
            <TextBlock Text="" Style="{StaticResource iFont}" FontSize="70" Margin="3" Foreground="#FB0AE8"></TextBlock>
            <TextBlock x:Name="ios" Style="{StaticResource iFont}" FontSize="80" Margin="3" Foreground="Chartreuse"></TextBlock>
            <TextBlock x:Name="android" Style="{StaticResource iFont}" FontSize="90" Margin="3" Foreground="#FEDB11"></TextBlock>
        </StackPanel>
    </Window>
    

    很奇怪Text属性在网页上无法显示,三个属性分别为:Text="&#xe600;" Text="&#xe61c;" Text="&#xe63d;"

    ⑥在CS代码中使用字体图标,MainWindow.xaml.cs代码:

    using System;
    using System.Collections.Generic;
    using System.Linq;
    using System.Text;
    using System.Threading.Tasks;
    using System.Windows;
    using System.Windows.Controls;
    using System.Windows.Data;
    using System.Windows.Documents;
    using System.Windows.Input;
    using System.Windows.Media;
    using System.Windows.Media.Imaging;
    using System.Windows.Navigation;
    using System.Windows.Shapes;
    namespace IconFontDemo
        /// <summary>
        /// MainWindow.xaml 的交互逻辑
        /// </summary>
        public partial class MainWindow : Window
            public MainWindow()
                InitializeComponent();
                ios.Text = "\xe602";
                android.Text = "\xe60c";
    ⑦最终效果演示