浜松のWEBシステム開発・スマートフォンアプリ開発・RTK-GNSS関連の開発はお任せください
株式会社シーポイントラボ
TEL:053-543-9889
営業時間:9:00~18:00(月〜金)
住所:静岡県浜松市中区富塚町1933-1 佐鳴湖パークタウンサウス2F

ハイブリッドアプリで画像を使いたい場合はfont-awasomeがおすすめ

今回はandroid・iphone両方で安全に画像を表示できるfont-awasomeのサイトについて書いていきます。

cordovaはハイブリッドアプリの土台となるフレームワークのため、window・macそれぞれpcを二台使って

デバッグすることになります。当然機種のブラウザによって表示・動作が異なるため画像が表示されない

などの不具合に遭遇することが多いです。

onsenuiから直接指定してもいいのですが、android・iphoneそれぞれに対する記述方法が以下のように異なっており

デバッグで調整しながらだとかなり時間を消費してしまいます。

<Icon size={20} style={{color: “#000”}} icon={{default: ‘ion-ios-add-circle’, material: ‘md-plus-circle’}} />

font-awasomeサイトは、iタグを使って以下のように一行で画像を表示できます。

使用する前にindex.htmlのhead内に以下のように記述

<link href=”https://use.fontawesome.com/releases/v5.15.1/css/all.css” rel=”stylesheet”>

試しにプラスボタンを表示してみたいと思います。一行です。

<i class=”fas fa-plus-circle”></i>

これでandroid・iphone両方で正常に表示させることができます。

扱える画像が多いのが魅力ですが、凝ったものを使うにはpro(有料会員登録)が必要に

なってくるので使用頻度が高ければ入会してみるのもアリだと思います。

proでなくてもハイクオリティな画像が揃っているので個人的にはこのままでもok。

  • この記事いいね! (0)