会社概要
会社概要
経営理念
プライバシーポリシー
サービス
WEBシステム・ スマートフォンアプリ開発
RTK-GNSS関連
DOMATCH
ラクソク
技術情報
アクセス
求人情報
お問い合わせ
CLOSE
CLOSE
font-awasomeでリッチなアイコンを装飾する
2021年5月31日
2021年5月31日
未分類
HOME
技術情報
未分類
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。
Prev
2021年5月19日
Google Chromeにユーザー選択画面が追加
Next
2021年6月1日
デバッグ時iphone6の限界を感じた瞬間の話