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。

font-awasomeでリッチなアイコンを装飾する

Google Chromeにユーザー選択画面が追加

デバッグ時iphone6の限界を感じた瞬間の話

株式会社シーポイントラボ