匿名用户不能发表回复！|
每天回帖即可获得10分可用分！小技巧：
你还可以输入10000个字符
(Ctrl+Enter)
请遵守CSDN，不得违反国家法律法规。
转载文章请注明出自“CSDN（www.csdn.net）”。如是商业用途请联系原作者。随笔 - 697&
文章 - 8&评论 - 850&trackbacks - 19
我之前在博客中介绍过，在WPF程序中，一般接触到的矢量图标资源有XAML、SVG、字体这三种格式。XAML是标准格式就不说了，SVG并不是直接支持的，不过微软提供了可以非常方便我们将其转换为XAML格式的资源。而对于字体，虽然WPF是直接支持的，但由于字体图标其特殊性，要将其显示为图标还是需要费点劲的。本文这里就以为例，介绍一下如何在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=""Style="{StaticResource FontAwesome}"
Foreground="Blue"&&&&&&&&&&&&&&&&
VerticalAlignment="Center" HorizontalAlignment="Center" FontSize="22"/&&&&&&/Grid&
运行后可以得到如下图标了：
原理并不复杂，将TextBlock的Text设置为图标对应的文字，设置其FontFamily为FontAwesome即可。但这里有一个小的知识点就是：一般来说，fortawesome之类的图标字体中图标对应的文字都是不可以通过输入法直接输入的，只能直接输入Unicode编码，WPF在XAML中使用Unicode编码输入的方式和HTML是一样的，例如0xf0c2就对应为"" 。
除了TextBlock外，我这里写的样式可以应用于任何支持字体显示的控件的：
&&&&&StackPanel&&&&&&&&&&Label Content="" Style="{StaticResource FontAwesome}" /&&&&&&&&&&Button Content="" Style="{StaticResource FontAwesome}"/&&&&&&&&&&ContentControl Content="" Style="{StaticResource FontAwesome}"/&&&&&&/StackPanel&
运行后效果如下：
最后一个问题就是如何找到我们的图标和对应的Unicode编码了，虽然可以通过安装字体后通过字符映射表查询，但是这样只能看到图形，而我们更希望先根据文字描述找图形，再根据图形找对应的十六进制值。好在一般那些字体图标网站上都列举了其对应关系的。对于fortawesome字体，直接访如下网页即可：
或者，也可以使用我这里写的一个XAML扩展，将Font-awsome的字体转换了为枚举。这样可以在代码中使用名字了，程序可读性要好得多。
class FontValueMarkupExtension : MarkupExtension
public FontDescription Font { get; set; }
public override object ProvideValue(IServiceProvider serviceProvider)
var charactor = typeof(FontDescription).GetField(Font.ToString())
.GetCustomAttribute&CharAttribute&()
return charactor.ToString();
[AttributeUsage(AttributeTargets.Field)]
sealed class CharAttribute : Attribute
public char Value { get; private set; }
public CharAttribute(char value)
this.Value =
enum FontDescription
[Char('\uf042')]
[Char('\uf170')]
[Char('\uf037')]
AlignCenter,
[Char('\uf039')]
AlignJustify,
[Char('\uf036')]
AlignLeft,
[Char('\uf038')]
AlignRight,
[Char('\uf0f9')]
Ambulance,
[Char('\uf13d')]
[Char('\uf17b')]
[Char('\uf209')]
Angellist,
[Char('\uf103')]
AngleDoubleDown,
[Char('\uf100')]
AngleDoubleLeft,
[Char('\uf101')]
AngleDoubleRight,
[Char('\uf102')]
AngleDoubleUp,
[Char('\uf107')]
AngleDown,
[Char('\uf104')]
AngleLeft,
[Char('\uf105')]
AngleRight,
[Char('\uf106')]
[Char('\uf179')]
[Char('\uf187')]
[Char('\uf1fe')]
AreaChart,
[Char('\uf0ab')]
ArrowCircleDown,
[Char('\uf0a8')]
ArrowCircleLeft,
[Char('\uf01a')]
ArrowCircleODown,
[Char('\uf190')]
ArrowCircleOLeft,
[Char('\uf18e')]
ArrowCircleORight,
[Char('\uf01b')]
ArrowCircleOUp,
[Char('\uf0a9')]
ArrowCircleRight,
[Char('\uf0aa')]
ArrowCircleUp,
[Char('\uf063')]
ArrowDown,
[Char('\uf060')]
ArrowLeft,
[Char('\uf061')]
ArrowRight,
[Char('\uf062')]
[Char('\uf047')]
[Char('\uf0b2')]
ArrowsAlt,
[Char('\uf07e')]
[Char('\uf07d')]
[Char('\uf069')]
[Char('\uf1fa')]
[Char('\uf1b9')]
Automobile,
[Char('\uf04a')]
[Char('\uf05e')]
[Char('\uf19c')]
[Char('\uf080')]
[Char('\uf080')]
BarChartO,
[Char('\uf02a')]
[Char('\uf0c9')]
[Char('\uf236')]
[Char('\uf0fc')]
[Char('\uf1b4')]
[Char('\uf1b5')]
BehanceSquare,
[Char('\uf0f3')]
[Char('\uf0a2')]
[Char('\uf1f6')]
BellSlash,
[Char('\uf1f7')]
BellSlashO,
[Char('\uf206')]
[Char('\uf1e5')]
Binoculars,
[Char('\uf1fd')]
BirthdayCake,
[Char('\uf171')]
Bitbucket,
[Char('\uf172')]
BitbucketSquare,
[Char('\uf15a')]
[Char('\uf032')]
[Char('\uf0e7')]
[Char('\uf1e2')]
[Char('\uf02d')]
[Char('\uf02e')]
[Char('\uf097')]
BookmarkO,
[Char('\uf0b1')]
Briefcase,
[Char('\uf15a')]
[Char('\uf188')]
[Char('\uf1ad')]
[Char('\uf0f7')]
BuildingO,
[Char('\uf0a1')]
[Char('\uf140')]
[Char('\uf207')]
[Char('\uf20d')]
Buysellads,
[Char('\uf1ba')]
[Char('\uf1ec')]
Calculator,
[Char('\uf073')]
[Char('\uf133')]
CalendarO,
[Char('\uf030')]
[Char('\uf083')]
CameraRetro,
[Char('\uf1b9')]
[Char('\uf0d7')]
CaretDown,
[Char('\uf0d9')]
CaretLeft,
[Char('\uf0da')]
CaretRight,
[Char('\uf150')]
CaretSquareODown,
[Char('\uf191')]
CaretSquareOLeft,
[Char('\uf152')]
CaretSquareORight,
[Char('\uf151')]
CaretSquareOUp,
[Char('\uf0d8')]
[Char('\uf218')]
CartArrowDown,
[Char('\uf217')]
[Char('\uf20a')]
[Char('\uf1f3')]
[Char('\uf1f2')]
CcDiscover,
[Char('\uf1f1')]
CcMastercard,
[Char('\uf1f4')]
[Char('\uf1f5')]
[Char('\uf1f0')]
[Char('\uf0a3')]
Certificate,
[Char('\uf0c1')]
[Char('\uf127')]
ChainBroken,
[Char('\uf00c')]
[Char('\uf058')]
CheckCircle,
[Char('\uf05d')]
CheckCircleO,
[Char('\uf14a')]
CheckSquare,
[Char('\uf046')]
CheckSquareO,
[Char('\uf13a')]
ChevronCircleDown,
[Char('\uf137')]
ChevronCircleLeft,
[Char('\uf138')]
ChevronCircleRight,
[Char('\uf139')]
ChevronCircleUp,
[Char('\uf078')]
ChevronDown,
[Char('\uf053')]
ChevronLeft,
[Char('\uf054')]
ChevronRight,
[Char('\uf077')]
ChevronUp,
[Char('\uf1ae')]
[Char('\uf111')]
[Char('\uf10c')]
[Char('\uf1ce')]
CircleONotch,
[Char('\uf1db')]
CircleThin,
[Char('\uf0ea')]
Clipboard,
[Char('\uf017')]
[Char('\uf00d')]
[Char('\uf0c2')]
[Char('\uf0ed')]
CloudDownload,
[Char('\uf0ee')]
CloudUpload,
[Char('\uf157')]
[Char('\uf121')]
[Char('\uf126')]
[Char('\uf1cb')]
[Char('\uf0f4')]
[Char('\uf013')]
[Char('\uf085')]
[Char('\uf0db')]
[Char('\uf075')]
[Char('\uf0e5')]
[Char('\uf086')]
[Char('\uf0e6')]
CommentsO,
[Char('\uf14e')]
[Char('\uf066')]
[Char('\uf20e')]
Connectdevelop,
[Char('\uf0c5')]
[Char('\uf1f9')]
Copyright,
[Char('\uf09d')]
CreditCard,
[Char('\uf125')]
[Char('\uf05b')]
Crosshairs,
[Char('\uf13c')]
[Char('\uf1b2')]
[Char('\uf1b3')]
[Char('\uf0c4')]
[Char('\uf0f5')]
[Char('\uf0e4')]
Dashboard,
[Char('\uf210')]
[Char('\uf1c0')]
[Char('\uf03b')]
[Char('\uf1a5')]
Delicious,
[Char('\uf108')]
[Char('\uf1bd')]
Deviantart,
[Char('\uf219')]
[Char('\uf1a6')]
[Char('\uf155')]
[Char('\uf192')]
DotCircleO,
[Char('\uf019')]
[Char('\uf17d')]
[Char('\uf16b')]
[Char('\uf1a9')]
[Char('\uf044')]
[Char('\uf052')]
[Char('\uf141')]
EllipsisH,
[Char('\uf142')]
EllipsisV,
[Char('\uf1d1')]
[Char('\uf0e0')]
[Char('\uf003')]
EnvelopeO,
[Char('\uf199')]
EnvelopeSquare,
[Char('\uf12d')]
[Char('\uf153')]
[Char('\uf153')]
[Char('\uf0ec')]
[Char('\uf12a')]
Exclamation,
[Char('\uf06a')]
ExclamationCircle,
[Char('\uf071')]
ExclamationTriangle,
[Char('\uf065')]
[Char('\uf08e')]
ExternalLink,
[Char('\uf14c')]
ExternalLinkSquare,
[Char('\uf06e')]
[Char('\uf070')]
[Char('\uf1fb')]
Eyedropper,
[Char('\uf09a')]
[Char('\uf09a')]
FacebookF,
[Char('\uf230')]
FacebookOfficial,
[Char('\uf082')]
FacebookSquare,
[Char('\uf049')]
FastBackward,
[Char('\uf050')]
FastForward,
[Char('\uf1ac')]
[Char('\uf182')]
[Char('\uf0fb')]
FighterJet,
[Char('\uf15b')]
[Char('\uf1c6')]
FileArchiveO,
[Char('\uf1c7')]
FileAudioO,
[Char('\uf1c9')]
FileCodeO,
[Char('\uf1c3')]
FileExcelO,
[Char('\uf1c5')]
FileImageO,
[Char('\uf1c8')]
FileMovieO,
[Char('\uf016')]
[Char('\uf1c1')]
[Char('\uf1c5')]
FilePhotoO,
[Char('\uf1c5')]
FilePictureO,
[Char('\uf1c4')]
FilePowerpointO,
[Char('\uf1c7')]
FileSoundO,
[Char('\uf15c')]
[Char('\uf0f6')]
FileTextO,
[Char('\uf1c8')]
FileVideoO,
[Char('\uf1c2')]
FileWordO,
[Char('\uf1c6')]
[Char('\uf0c5')]
[Char('\uf008')]
[Char('\uf0b0')]
[Char('\uf06d')]
[Char('\uf134')]
FireExtinguisher,
[Char('\uf024')]
[Char('\uf11e')]
FlagCheckered,
[Char('\uf11d')]
[Char('\uf0e7')]
[Char('\uf0c3')]
[Char('\uf16e')]
[Char('\uf0c7')]
[Char('\uf07b')]
[Char('\uf114')]
[Char('\uf07c')]
FolderOpen,
[Char('\uf115')]
FolderOpenO,
[Char('\uf031')]
[Char('\uf211')]
[Char('\uf04e')]
[Char('\uf180')]
Foursquare,
[Char('\uf119')]
[Char('\uf1e3')]
[Char('\uf11b')]
[Char('\uf0e3')]
[Char('\uf154')]
[Char('\uf1d1')]
[Char('\uf013')]
[Char('\uf085')]
[Char('\uf1db')]
Genderless,
[Char('\uf06b')]
[Char('\uf1d3')]
[Char('\uf1d2')]
GitSquare,
[Char('\uf09b')]
[Char('\uf113')]
GithubAlt,
[Char('\uf092')]
GithubSquare,
[Char('\uf184')]
[Char('\uf000')]
[Char('\uf0ac')]
[Char('\uf1a0')]
[Char('\uf0d5')]
GooglePlus,
[Char('\uf0d4')]
GooglePlusSquare,
[Char('\uf1ee')]
GoogleWallet,
[Char('\uf19d')]
GraduationCap,
[Char('\uf184')]
[Char('\uf0c0')]
[Char('\uf0fd')]
[Char('\uf1d4')]
HackerNews,
[Char('\uf0a7')]
HandODown,
[Char('\uf0a5')]
HandOLeft,
[Char('\uf0a4')]
HandORight,
[Char('\uf0a6')]
[Char('\uf0a0')]
[Char('\uf1dc')]
[Char('\uf025')]
Headphones,
[Char('\uf004')]
[Char('\uf08a')]
[Char('\uf21e')]
Heartbeat,
[Char('\uf1da')]
[Char('\uf015')]
[Char('\uf0f8')]
HospitalO,
[Char('\uf236')]
[Char('\uf13b')]
[Char('\uf20b')]
[Char('\uf03e')]
[Char('\uf01c')]
[Char('\uf03c')]
[Char('\uf129')]
[Char('\uf05a')]
InfoCircle,
[Char('\uf156')]
[Char('\uf16d')]
Instagram,
[Char('\uf19c')]
Institution,
[Char('\uf208')]
[Char('\uf033')]
[Char('\uf1aa')]
[Char('\uf157')]
[Char('\uf1cc')]
[Char('\uf084')]
[Char('\uf11c')]
KeyboardO,
[Char('\uf159')]
[Char('\uf1ab')]
[Char('\uf109')]
[Char('\uf202')]
[Char('\uf203')]
LastfmSquare,
[Char('\uf06c')]
[Char('\uf212')]
[Char('\uf0e3')]
[Char('\uf094')]
[Char('\uf149')]
LevelDown,
[Char('\uf148')]
[Char('\uf1cd')]
[Char('\uf1cd')]
[Char('\uf1cd')]
[Char('\uf1cd')]
LifeSaver,
[Char('\uf0eb')]
LightbulbO,
[Char('\uf201')]
LineChart,
[Char('\uf0c1')]
[Char('\uf0e1')]
[Char('\uf08c')]
LinkedinSquare,
[Char('\uf17c')]
[Char('\uf03a')]
[Char('\uf022')]
[Char('\uf0cb')]
[Char('\uf0ca')]
[Char('\uf124')]
LocationArrow,
[Char('\uf023')]
[Char('\uf175')]
LongArrowDown,
[Char('\uf177')]
LongArrowLeft,
[Char('\uf178')]
LongArrowRight,
[Char('\uf176')]
LongArrowUp,
[Char('\uf0d0')]
[Char('\uf076')]
[Char('\uf064')]
MailForward,
[Char('\uf112')]
MailReply,
[Char('\uf122')]
MailReplyAll,
[Char('\uf183')]
[Char('\uf041')]
MapMarker,
[Char('\uf222')]
[Char('\uf227')]
MarsDouble,
[Char('\uf229')]
MarsStroke,
[Char('\uf22b')]
MarsStrokeH,
[Char('\uf22a')]
MarsStrokeV,
[Char('\uf136')]
[Char('\uf20c')]
[Char('\uf23a')]
[Char('\uf0fa')]
[Char('\uf11a')]
[Char('\uf223')]
[Char('\uf130')]
Microphone,
[Char('\uf131')]
MicrophoneSlash,
[Char('\uf068')]
[Char('\uf056')]
MinusCircle,
[Char('\uf146')]
MinusSquare,
[Char('\uf147')]
MinusSquareO,
[Char('\uf10b')]
[Char('\uf10b')]
MobilePhone,
[Char('\uf0d6')]
[Char('\uf186')]
[Char('\uf19d')]
MortarBoard,
[Char('\uf21c')]
Motorcycle,
[Char('\uf001')]
[Char('\uf0c9')]
[Char('\uf22c')]
[Char('\uf1ea')]
NewspaperO,
[Char('\uf19b')]
[Char('\uf03b')]
[Char('\uf18c')]
Pagelines,
[Char('\uf1fc')]
PaintBrush,
[Char('\uf1d8')]
PaperPlane,
[Char('\uf1d9')]
PaperPlaneO,
[Char('\uf0c6')]
Paperclip,
[Char('\uf1dd')]
Paragraph,
[Char('\uf0ea')]
[Char('\uf04c')]
[Char('\uf1b0')]
[Char('\uf1ed')]
[Char('\uf040')]
[Char('\uf14b')]
PencilSquare,
[Char('\uf044')]
PencilSquareO,
[Char('\uf095')]
[Char('\uf098')]
PhoneSquare,
[Char('\uf03e')]
[Char('\uf03e')]
[Char('\uf200')]
[Char('\uf1a7')]
PiedPiper,
[Char('\uf1a8')]
PiedPiperAlt,
[Char('\uf0d2')]
Pinterest,
[Char('\uf231')]
PinterestP,
[Char('\uf0d3')]
PinterestSquare,
[Char('\uf072')]
[Char('\uf04b')]
[Char('\uf144')]
PlayCircle,
[Char('\uf01d')]
PlayCircleO,
[Char('\uf1e6')]
[Char('\uf067')]
[Char('\uf055')]
PlusCircle,
[Char('\uf0fe')]
PlusSquare,
[Char('\uf196')]
PlusSquareO,
[Char('\uf011')]
[Char('\uf02f')]
[Char('\uf12e')]
PuzzlePiece,
[Char('\uf1d6')]
[Char('\uf029')]
[Char('\uf128')]
[Char('\uf059')]
QuestionCircle,
[Char('\uf10d')]
QuoteLeft,
[Char('\uf10e')]
QuoteRight,
[Char('\uf1d0')]
[Char('\uf074')]
[Char('\uf1d0')]
[Char('\uf1b8')]
[Char('\uf1a1')]
[Char('\uf1a2')]
RedditSquare,
[Char('\uf021')]
[Char('\uf00d')]
[Char('\uf18b')]
[Char('\uf0c9')]
[Char('\uf01e')]
[Char('\uf112')]
[Char('\uf122')]
[Char('\uf079')]
[Char('\uf157')]
[Char('\uf018')]
[Char('\uf135')]
[Char('\uf0e2')]
RotateLeft,
[Char('\uf01e')]
RotateRight,
[Char('\uf158')]
[Char('\uf09e')]
[Char('\uf143')]
RssSquare,
[Char('\uf158')]
[Char('\uf158')]
[Char('\uf156')]
[Char('\uf0c7')]
[Char('\uf0c4')]
[Char('\uf002')]
[Char('\uf010')]
SearchMinus,
[Char('\uf00e')]
SearchPlus,
[Char('\uf213')]
[Char('\uf1d8')]
[Char('\uf1d9')]
[Char('\uf233')]
[Char('\uf064')]
[Char('\uf1e0')]
[Char('\uf1e1')]
ShareAltSquare,
[Char('\uf14d')]
ShareSquare,
[Char('\uf045')]
ShareSquareO,
[Char('\uf20b')]
[Char('\uf20b')]
[Char('\uf132')]
[Char('\uf21a')]
[Char('\uf214')]
Shirtsinbulk,
[Char('\uf07a')]
ShoppingCart,
[Char('\uf090')]
[Char('\uf08b')]
[Char('\uf012')]
[Char('\uf215')]
Simplybuilt,
[Char('\uf0e8')]
[Char('\uf216')]
[Char('\uf17e')]
[Char('\uf198')]
[Char('\uf1de')]
[Char('\uf1e7')]
Slideshare,
[Char('\uf118')]
[Char('\uf1e3')]
SoccerBallO,
[Char('\uf0dc')]
[Char('\uf15d')]
SortAlphaAsc,
[Char('\uf15e')]
SortAlphaDesc,
[Char('\uf160')]
SortAmountAsc,
[Char('\uf161')]
SortAmountDesc,
[Char('\uf0de')]
[Char('\uf0dd')]
[Char('\uf0dd')]
[Char('\uf162')]
SortNumericAsc,
[Char('\uf163')]
SortNumericDesc,
[Char('\uf0de')]
[Char('\uf1be')]
Soundcloud,
[Char('\uf197')]
SpaceShuttle,
[Char('\uf110')]
[Char('\uf1b1')]
[Char('\uf1bc')]
[Char('\uf0c8')]
[Char('\uf096')]
[Char('\uf18d')]
StackExchange,
[Char('\uf16c')]
StackOverflow,
[Char('\uf005')]
[Char('\uf089')]
[Char('\uf123')]
StarHalfEmpty,
[Char('\uf123')]
StarHalfFull,
[Char('\uf123')]
StarHalfO,
[Char('\uf006')]
[Char('\uf1b6')]
[Char('\uf1b7')]
SteamSquare,
[Char('\uf048')]
StepBackward,
[Char('\uf051')]
StepForward,
[Char('\uf0f1')]
Stethoscope,
[Char('\uf04d')]
[Char('\uf21d')]
StreetView,
[Char('\uf0cc')]
Strikethrough,
[Char('\uf1a4')]
Stumbleupon,
[Char('\uf1a3')]
StumbleuponCircle,
[Char('\uf12c')]
Subscript,
[Char('\uf239')]
[Char('\uf0f2')]
[Char('\uf185')]
[Char('\uf12b')]
Superscript,
[Char('\uf1cd')]
[Char('\uf0ce')]
[Char('\uf10a')]
[Char('\uf0e4')]
Tachometer,
[Char('\uf02b')]
[Char('\uf02c')]
[Char('\uf0ae')]
[Char('\uf1ba')]
[Char('\uf1d5')]
TencentWeibo,
[Char('\uf120')]
[Char('\uf034')]
TextHeight,
[Char('\uf035')]
TextWidth,
[Char('\uf00a')]
[Char('\uf009')]
[Char('\uf00b')]
[Char('\uf08d')]
ThumbTack,
[Char('\uf165')]
ThumbsDown,
[Char('\uf088')]
ThumbsODown,
[Char('\uf087')]
ThumbsOUp,
[Char('\uf164')]
[Char('\uf145')]
[Char('\uf00d')]
[Char('\uf057')]
TimesCircle,
[Char('\uf05c')]
TimesCircleO,
[Char('\uf043')]
[Char('\uf150')]
ToggleDown,
[Char('\uf191')]
ToggleLeft,
[Char('\uf204')]
ToggleOff,
[Char('\uf205')]
[Char('\uf152')]
ToggleRight,
[Char('\uf151')]
[Char('\uf238')]
[Char('\uf224')]
Transgender,
[Char('\uf225')]
TransgenderAlt,
[Char('\uf1f8')]
[Char('\uf014')]
[Char('\uf1bb')]
[Char('\uf181')]
[Char('\uf091')]
[Char('\uf0d1')]
[Char('\uf195')]
[Char('\uf1e4')]
[Char('\uf173')]
[Char('\uf174')]
TumblrSquare,
[Char('\uf195')]
TurkishLira,
[Char('\uf1e8')]
[Char('\uf099')]
[Char('\uf081')]
TwitterSquare,
[Char('\uf0e9')]
[Char('\uf0cd')]
Underline,
[Char('\uf0e2')]
[Char('\uf19c')]
University,
[Char('\uf127')]
[Char('\uf09c')]
[Char('\uf13e')]
UnlockAlt,
[Char('\uf0dc')]
[Char('\uf093')]
[Char('\uf155')]
[Char('\uf007')]
[Char('\uf0f0')]
[Char('\uf234')]
[Char('\uf21b')]
UserSecret,
[Char('\uf235')]
UserTimes,
[Char('\uf0c0')]
[Char('\uf221')]
[Char('\uf226')]
VenusDouble,
[Char('\uf228')]
VenusMars,
[Char('\uf237')]
[Char('\uf03d')]
VideoCamera,
[Char('\uf194')]
VimeoSquare,
[Char('\uf1ca')]
[Char('\uf189')]
[Char('\uf027')]
VolumeDown,
[Char('\uf026')]
VolumeOff,
[Char('\uf028')]
[Char('\uf071')]
[Char('\uf1d7')]
[Char('\uf18a')]
[Char('\uf1d7')]
[Char('\uf232')]
[Char('\uf193')]
Wheelchair,
[Char('\uf1eb')]
[Char('\uf17a')]
[Char('\uf159')]
[Char('\uf19a')]
Wordpress,
[Char('\uf0ad')]
[Char('\uf168')]
[Char('\uf169')]
XingSquare,
[Char('\uf19e')]
[Char('\uf1e9')]
[Char('\uf157')]
[Char('\uf167')]
[Char('\uf16a')]
YoutubePlay,
[Char('\uf166')]
YoutubeSquare,
另外的一个好处是可以使用VisualStudio的智能提示功能了。
虽然这样也比较方便，但XAML中的智能提示没有代码中那么强大（只输入后面的部分大部分情况下提示不出来），另外感觉还是没有一个总体的视图，许多时候还是得看看上面的那个网页。
阅读(...) 评论()这篇教程中，我将向你演示如何在安卓项目中使用 FontAwesome 图标集合。FontAwesome 可以节省许多时间，原因如下：
首先，你不需要担心不同手机上的屏幕分辨率问题。如果你使用png图片，你需要在包里面对每个图标至少包含四种不同的版本。不仅如此，在某些超清屏幕上，你的图标可能会出现颗粒感。这显然是要避免的。但如果使用FontAwesome，你只需包含一个”TTF”文件。
其次，你可以依赖于当今最丰富的免费图标集之一。而且因为其在web上被广泛的使用，现在用户已经习惯了FontAwesome的风格。你不必再浪费时间去寻找漂亮的丰富的可以免费商用的图标集合，我并不是说不存在这样的图标集，因为确实存在，但是非常稀少。
1. FontAwesome 的工作原理
我们先花点时间来了解一下FontAwesome 的工作原理。FontAwesome 图标集背后的思想非常简单，图标被视为字符（character）。你可以能已经注意到一些奇怪的字符被作为文本对待，你可以轻易的拷贝 β 字符或者 ∑ 字符。你甚至可以在普通的文本编辑框中这样做。还可以改变它们的大小和颜色。这是因为浏览器 － 以及文本编辑框 － 把这些字符视为文本。
FontAwesome 通过包含广泛的图标扩展了这一概念。你可以把它比喻成用图标指定的不能打出的Unicode字符。
FontAwesome
就知道我在说什么了。你选择列表中的一个图标，记下它的Unicode的字符，在TextView中使用它告诉安卓使用FontAwesome字体来渲染。
2. 导入字体文件
让我们来看一个例子。下载和导入FontAwesome 的TrueType 文件到项目。你可以从 上下载FontAwesome 的assets。
当你下载了FontAwesome之后，你会发现里面包含了一些文件和文件夹。大部分都是对web项目有用的。我们只对位于fonts目录的 fontawesome-webfont.ttf感兴趣。
在你的安卓项目中，导航到 app & src & main。 main 目录应该包含了一个叫 assets的文件夹。如果没有就创建一个。在assets 文件夹中创建另一个fonts文件夹，并把fontawesome-webfont.ttf 添加到这个文件夹。
主义 fonts 文件夹并不是必须的。你可以直接把FontAwesome 的字体文件放在 assets 目录，但是把相同类型的文件放在专门的目录里面比较方便。只要FontAwesome 字体在assets 或者子目录之下就行。
3. 创建一个帮助类
现在你已经成功的把FontAwesome 字体文件包含在了自己的安卓项目里，是时候使用它了。我们会创建一个帮助类来让事情变得简单点。这个类要使用到android.graphics.Typeface。Typeface类指定typeface 以及一个字体的特征。它用于指明text在绘制（以及测量）的时候该如何显示。
创建一个新的名叫FontManager的java类：
public class FontManager {
public static final String ROOT = "fonts/",
FONTAWESOME = ROOT + "fontawesome-webfont.ttf";
public static Typeface getTypeface(Context context, String font) {
return Typeface.createFromAsset(context.getAssets(), font);
如果你想在项目中使用其他的字体，把字体放在helper 类里面就可以了。类似于：
yourTextView.setTypeface(FontManager.getTypeface(FontManager.YOURFONT));
我们需要做的就这么多，但是我们可以做的更好。使用上面的方法的话，我们需要为每个想当成图标来使用的TextView创建一个变量。但作为一个，我们都很懒，对吧？
图标一般都是包含在一个ViewGroup，比如一个RelativeLayout或者LinearLayout中。我们可以写一个方法，爬遍指定xml parent 并且递归的覆盖每个TextView的字体。
public class FontManager {
public static void markAsIconContainer(View v, Typeface typeface) {
if (v instanceof ViewGroup) {
ViewGroup vg = (ViewGroup)
for (int i = 0; i & vg.getChildCount(); i++) {
View child = vg.getChildAt(i);
markAsIconContainer(child);
} else if (v instanceof TextView) {
((TextView) v).setTypeface(typeface);
假设你的布局文件是这样的：
&LinearLayout
xmlns:android="/apk/res/android"
xmlns:tools="/tools"
android:id="@+id/icons_container"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:paddingBottom="@dimen/activity_vertical_margin"
android:paddingLeft="@dimen/activity_horizontal_margin"
android:paddingRight="@dimen/activity_horizontal_margin"
android:paddingTop="@dimen/activity_vertical_margin"
tools:context=".MainActivity"&
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:gravity="center"
android:layout_weight="1" /&
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:gravity="center"
android:layout_weight="1" /&
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:gravity="center"
android:layout_weight="1" /&
&/LinearLayout&
要把这三个TextView标记为图标，我们重写onCreate方法，并添加如下代码片段：
Typeface iconFont = FontManager.getTypeface(getApplicationContext(), FontManager.FONTAWESOME);
FontManager.markAsIconContainer(findViewById(R.id.icons_container), iconFont);
4. 使用你想要的图标
现在轮到有意思的部分了。访问
并浏览所给的图标。选择三个你喜欢的。我准备选择三个chart图标，分别是 , , 以及 。
在你的项目中，进入 values 文件夹并创建一个新的文件：icons.xml。这个文件将被作为字典使用，它将把Unicode 字符和相应的图标用可读的名字匹配起来。这意味着我们需要为每个图标创建一个入口。
&resources&
&string name="fa_icon_areachart"&&#xf1&/string&
&string name="fa_icon_piechart"&&/string&
&string name="fa_icon_linechart"&&/string&
&/resources&
你可以在或者图标的
找到你感兴趣图标的代码。
下一步就是在布局的TextView里面引用这些字符串。这是最终的样子：
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:gravity="center"
android:layout_weight="1"
android:text="@string/fa_icon_areachart" /&
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:gravity="center"
android:layout_weight="1"
android:text="@string/fa_icon_piechart" /&
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:gravity="center"
android:layout_weight="1"
android:text="@string/fa_icon_linechart" /&
如果你打开Android Studio的布局编辑器，你会看到它无法渲染这些图标。这是不正常的。编译并启动应用，你又会发现图标是正常渲染了的。
看起啦很小是吧？改变图标的大小很简单，你只需改变textSize属性就是了。改变图标的颜色也一样简单，编辑textColor属性就是了。
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:gravity="center"
android:layout_weight="1"
android:textSize="45sp"
android:textColor="#9b59b6"
android:text="@string/fa_icon_areachart" /&
就如你看见的，这些图标明亮鲜明。这是因为FontAwesome 在运行时渲染。它们是矢量图标而不是栅格图标。
在这篇文章中，我演示了如何在一个安卓项目中使用FontAwesome 图标集。FontAwesome 广为所知且免费。即使在超清屏幕上，显示结果也很明快。改变颜色和大小都跟改变属性一样简单。