「Font Awesome 5」を利用して、DvExpress社ASP.NETの「ASPxButton」にアイコン表示させる

2021/2/4 c#, DevExpress, プログラミング

現在、DvExpress社のASP.NETを利用して、Webシステムを開発中でして、
ボタンに「Font Awesome 5」のアイコンを利用したくてcssを設定したのですが、うまく表示されなくて…
色々やっているうちに、設定方法が分かったので、備忘録として残しておきます。

ちなみに、「Font Awesome」とは、Web上でよく利用される上記のようなアイコンをアイコンフォントという文字として使うことができるツールです。

通常、「Font Awesome」を利用する場合は、ボタンのクラスに「Font Awesome」のアイコンクラスを追加するのですが、ASP.NETの場合は、htmlが自動で出力されるため、cssに設定しても表示されません。

なので、ASP.NETページがリクエストされた直後に呼び出される、Page_Loadメソッド内で、
「ASPxButton」コントロールのTextプロパティに、文字と一緒に、「Font Awesome 5」のアイコンを追記することで表示されます。
その際、HTMLエンコードされないよう、EncodeHtmlをfalseに設定しておきます。

以下、設定例です。

Page1.aspx

 <div class="dtableCellPrev">
    <dx:ASPxButton ID="ButtonPrev" runat="server" Text="戻る" AutoPostBack="false" Width="100" OnClick="OnClickButtonPrev" Theme="iOS" >
    </dx:ASPxButton>
</div>

<dx:ASPxButton ID="ButtonPrev" runat="server" Text="戻る" AutoPostBack="false" Width="100" OnClick="OnClickButtonPrev" Theme="iOS" >

</dx:ASPxButton>

</div>

Page1.aspx.cs

        protected void Page_Load(object sender, EventArgs e)
        {
            this.ButtonPrev.EncodeHtml = false;
            this.ButtonPrev.Text = "<i class="fas fa-backward"></i>　戻る";
        }