Custom Fonts & Font Icons/Images

[LeoAndo]

はじめに

Font-Awesomeで提供されているfont/iconを使ってサンプル実装します。

[LeoAndo]

カスタムフォントの導入手順

• ttfファイルをプロジェクトに追加し、埋め込みリソースとして設定する
  • フォントファイル https://github.com/FortAwesome/Font-Awesome/blob/master/webfonts/fa-solid-900.ttf https://github.com/FortAwesome/Font-Awesome/blob/master/webfonts/fa-brands-400.ttf https://github.com/FortAwesome/Font-Awesome/blob/master/webfonts/fa-regular-400.ttf

• CSファイルにフォントの定義を追加する

https://github.com/LeoAndo/xamarin-forms-training/blob/main/CustomFontSample/CustomFontSample/AssemblyInfo.cs#L5:L7

[LeoAndo]

カスタムアイコン導入手順

1. FontAwesomeIcons.csをコピペで導入する https://raw.githubusercontent.com/matthewrdev/fa2cs/master/FontAwesomeIcons.cs

[LeoAndo]

XAMLに定義されているLabelコントロールにカスタムフォント/アイコンを適用する

FontFamilyにはAliasを指定すると簡潔に書けるのと、アイコン指定時に、Font-Awesomeで提供されているfontファイルをFontFamilyに指定するところがポイント！

Fonts

Icons

[LeoAndo]

refs

• live coding
• Font-Awesome(webfonts) https://github.com/FortAwesome/Font-Awesome/tree/master/webfonts
• すべてのFontAwesomeアイコンのunicodeの定数を持つ Static C#クラスを提供しているエンジニアがいる！！ https://github.com/matthewrdev/fa2cs https://raw.githubusercontent.com/matthewrdev/fa2cs/master/FontAwesomeIcons.cs
  • マテリアルアイコンも同様にC#で提供している