WPF字型圖示——FontAwesom

原文: WPF字型圖示——FontAwesom

版權聲明：本文為【CSDN部落客：松一160】原創文章，未經允許不得轉載。 https://blog.csdn.net/songyi160/article/details/54907492

一、字型圖示概述

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=""  Text=""  Text=""

⑤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";
        }
    }
}
           

⑥效果示範