WPF阿里巴巴矢量图标库的使用

1.图标字体

假装有描述

2.获取图标字体

2.1IconFont库

网站地址：iconfont-阿里巴巴矢量图标库

2.2下载图标字体

2.2.1添加库

找到喜欢的样式，点击添加到库

2.2.2添加到项目

2.2.3下载到本地

3.WPF中引用

3.1添加到资源文件

• 打开下载的文件，找到[.ttf]文件。右键复制
• 

• 新建Resources文件夹右键粘贴，将刚复制的.ttf文件粘贴
• 

3.2Xaml中应用

• 创建Style样式

• 使用style

   <Window.Resources>
          <Style x:Key="FIcon" TargetType="TextBlock">
              <Setter Property="FontFamily" Value="Resources/#iconfont"></Setter>
              <Setter Property="TextAlignment" Value="Center"/>
              <Setter Property="HorizontalAlignment" Value="Center"/>
              <Setter Property="VerticalAlignment" Value="Center"/>
              <Setter Property="FontSize" Value="20"/>
          </Style>
  
          <Style x:Key="FIconBtu" TargetType="Button">
              <Setter Property="FontFamily" Value="Resources/#iconfont"></Setter>
              <Setter Property="HorizontalAlignment" Value="Center"/>
              <Setter Property="VerticalAlignment" Value="Center"/>
              <Setter Property="FontSize" Value="20"/>
          </Style>
  
      </Window.Resources>

  样式

• <StackPanel Grid.Row="1" Orientation="Horizontal">
              <Button Content="" Style="{StaticResource FIconBtu}" Margin="3" FontSize="30"></Button>
              <Button Content="" Style="{StaticResource FIconBtu}" Margin="3" FontSize="30"></Button>
              <Button Content="" Style="{StaticResource FIconBtu}" Margin="3" FontSize="30"></Button>
              <Button Content="" Style="{StaticResource FIconBtu}" Margin="3" FontSize="30"></Button>
              <Button Content="" Style="{StaticResource FIconBtu}" Margin="3" FontSize="30"></Button>
              <Button Content="" Style="{StaticResource FIconBtu}" Margin="3" FontSize="30"></Button>
          </StackPanel>

  效果

• 

    声明：此文章为本人学习记录所写，如有不当之处，请批评指正，如有雷同纯属巧合。