Qiita Teams that are logged in
You are not logged in to any team

Log in to Qiita Team
Community
OrganizationEventAdvent CalendarQiitadon (β)
Service
Qiita JobsQiita ZineQiita Blog
5
Help us understand the problem. What are the problem?

More than 3 years have passed since last update.

@tafuji

Xamarin.Android で Font Awesome のアイコンを利用する

Xamarin でもFont Awesome などのアイコンが利用できるとのことなので、Xamarin.Android で検証した手順を以下に示します。


0. プロジェクトの作成

今回は、Visual Studio の [Andorid Blank AppCompat] のテンプレートを利用してプロジェクトを作成しました。

1. Nuget パッケージを取得します

Xam.Plugin.Iconize は必須パッケージなので必ずインストールしましょう。その他のパッケージは、必要に応じてインストールしましょう。

  • Xam.Plugin.Iconize
  • Xam.Plugin.Iconize.FontAwesome

2. 初期化処理を実装する

Icon を利用するには、Activity か Application の OnCreate メソッド内で、Plugin の初期化を実行しなければなりません。今回は、MainActivity の OnCreate 内に初期化処理を実装しました。

MainActivity.cs
public override void OnCreate()
{
    base.OnCreate();

    // プラグインの初期化処理
    Plugin.Iconize.Iconize.With(new Plugin.Iconize.Fonts.FontAwesomeModule());
}

3. アイコンボタンを画面に配置

画面にアイコンボタンを記述します。

main.axml
<Plugin.Iconize.Droid.Controls.IconButton
    android:id="@+id/SampleButton"
    android:textSize="25sp"
    android:textColor="@color/primaryText"
    android:minWidth="35dp"
    android:gravity="center"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content" />

4. ボタンのテキストにアイコンのフォントを指定する

IconButtonText Property への値の代入方法がポイントです。{アイコン名} の形式で代入してください。

IconButton iconButton = FindViewById<IconButton>(Resource.Id.SampleButton);
iconButton.Text = "{fa-calendar}";

本家のサイトを参考にして、お好みのアイコンを指定してください。


今回は、Android での検証を行いましたが、Iconize Plugin for Xamarin は Xamarin.Forms, Xamarin.iOS にも対応しています。機会があれば検証してみたいと思います。

Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
5
Help us understand the problem. What are the problem?