WPF字體圖標——FontAwesom

2019-11-11 04:25:17

字體：大中小

來源：轉載

供稿：網友

一、字體圖標概述

FontAwesome是迄今為止最出色的圖標字體（沒有之一），優點是圖標多、圖標美觀、兼容各種應用場景等。

二、獲取FontAwesome字體圖標庫

FontAwesome主頁

GitHub的下載地址

FontAwesome字體圖標列表

三、加壓下載到的字體庫壓縮包，得到字體圖標庫文件

四、像WPF字體圖標——IconFont提供的步驟調用即可，只需要將樣式引用的字體名稱改為：#FontAwesome，注意名稱大小寫，否則找不到對應的圖標

①項目目錄結構

②MyFontAwesome.xaml

<ResourceDictionary xmlns="http://schemas.microsoft.com/winfx/2006/xaml/PResentation"                    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"                    xmlns:local="clr-namespace:FontAwesomeDemo">    <Style x:Key="iFont" TargetType="TextBlock">        <Setter Property="FontFamily" Value="/FontAwesomeDemo;component/Resources/#FontAwesome"/>        <Setter Property="TextAlignment" Value="Center"/>        <Setter Property="HorizontalAlignment" Value="Center"/>        <Setter Property="VerticalAlignment" Value="Center"/>        <Setter Property="FontSize" Value="20"/>    </Style></ResourceDictionary>③App.xaml<application x:Class="FontAwesomeDemo.App"             xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"             xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"             xmlns:local="clr-namespace:FontAwesomeDemo"             StartupUri="MainWindow.xaml">    <Application.Resources>        <ResourceDictionary>            <ResourceDictionary.MergedDictionaries>                <ResourceDictionary Source="MyFontAwesome.xaml"/>            </ResourceDictionary.MergedDictionaries>        </ResourceDictionary>    </Application.Resources></Application>④MainWindow.xaml
<Window x:Class="FontAwesomeDemo.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:FontAwesomeDemo"        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="QQ" Style="{StaticResource iFont}" FontSize="80" Margin="3" Foreground="Chartreuse"></TextBlock>        <TextBlock x:Name="refresh" Style="{StaticResource iFont}" FontSize="90" Margin="3" Foreground="#FEDB11"></TextBlock>    </StackPanel></Window>很奇怪Text屬性在網頁上無法顯示，三個屬性分別為：Text="&#xf1fe;"  Text="&#xf24e;"  Text="&#xf240;"⑤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 FontAwesomeDemo{    /// <summary>    /// MainWindow.xaml 的交互邏輯    /// </summary>    public partial class MainWindow : Window    {        public MainWindow()        {            InitializeComponent();            qq.Text = "/xf1d6";            refresh.Text = "/xf021";        }    }}⑥效果演示