WPF使用FontAwesome字体图标


本文整理自网络,侵删。

在WPF程序中,一般接触到的矢量图标资源有XAML、SVG、字体这三种格式。XAML是标准格式就不说了,SVG并不是直接支持的,不过微软提供了Expression Design可以非常方便我们将其转换为XAML格式的资源。而对于字体,虽然WPF是直接支持的,但由于字体图标其特殊性,要将其显示为图标还是需要费点劲的。本文这里就以Font-Awesome为例,介绍一下如何在WPF中使用字体图标。

首先添加一个样式,为了使用方便,建议直接做为全局样式:

    <Style x:Key="FontAwesome" >
        <Setter Property="TextElement.FontFamily" Value="pack://application:,,,/Resource/#FontAwesome" />
        <Setter Property="TextElement.FontSize" Value="14" />
    </Style>

请注意我这里的FontFamily的设置,我是采用的嵌入字体的方式,这样在没有装该字体的机器上也是能正确显示图标的。

然后就可以直接使用该样式了:

    <Grid>
        <TextBlock Text="&#xf0c2;"Style="{StaticResource FontAwesome}" Foreground="Blue"
                 VerticalAlignment="Center" HorizontalAlignment="Center" FontSize="22"/>
    </Grid>

运行后可以得到如下图标了:

原理并不复杂,将TextBlock的Text设置为图标对应的文字,设置其FontFamily为FontAwesome即可。但这里有一个小的知识点就是:一般来说,fortawesome之类的图标字体中图标对应的文字都是不可以通过输入法直接输入的,只能直接输入Unicode编码,WPF在XAML中使用Unicode编码输入的方式和HTML是一样的,例如0xf0c2就对应为"&#xf0c2;"

除了TextBlock外,我这里写的样式可以应用于任何支持字体显示的控件的:

    <StackPanel>
        <Label Content="&#xf0c2;" Style="{StaticResource FontAwesome}" />
        <Button Content="&#xf0c2;" Style="{StaticResource FontAwesome}"/>
        <ContentControl Content="&#xf0c2;" Style="{StaticResource FontAwesome}"/>
    </StackPanel>

运行后效果如下:

最后一个问题就是如何找到我们的图标和对应的Unicode编码了,虽然可以通过安装字体后通过字符映射表查询,但是这样只能看到图形,而我们更希望先根据文字描述找图形,再根据图形找对应的十六进制值。好在一般那些字体图标网站上都列举了其对应关系的。对于fortawesome字体,直接访如下网页即可:http://fortawesome.github.io/Font-Awesome/cheatsheet/

阅读剩余部分

相关阅读 >>

wordpress之给文章内容中间插入广告的实现方法

基于wordpress主题制作的具体实现步骤

wordpress中文截断产生乱码解决方法

优化wordpress分类链接及wp-no-category-base的卸载方法

wordpress实现退出登录后跳转到指定页面的方法

如何用nginx配置wordpress的方法示例

关于wordpress的seo优化相关的一些php页面脚本技巧

开发者应该留意的wordpress2.9新功能小结

去除wordpress中评论中的nofollow的方法

禁用wordpress的自动保存草稿文章修订功能方法详解

更多相关阅读请进入《wordpress》频道 >>



打赏

取消

感谢您的支持,我会继续努力的!

扫码支持
扫码打赏,您说多少就多少

打开支付宝扫一扫,即可进行扫码打赏哦

分享从这里开始,精彩与您同在

评论

管理员已关闭评论功能...