Onsen UI 最新版v2.10.10には、以下のアイコンが組み込まれています。

Material Design Iconic Font v2.2.0
Font Awesome Free 5.8.1
Ionicons, v4.5.5

アイコンをそのまま使うには問題ありませんが、大きさを変えたり、太くしたりする方法は、各アイコンの仕様により異なります。


今回は、アイコンをさらに太く表示する方法について紹介します。

※11/13の時点で、MonacaのOnsen UIはv2.10.8ですので、libフォルダを最新版に入れ替えてください。

一番効果的な方法は、CSSにて-webkit-text-strokeを指定する方法です。
Monacaデバッガーの結果です。
チェックマークなど線が細いアイコンは太くすることで見栄えがよくなりますが、白抜きのアイコンは文字が消えてしまうので注意が必要です。

※2019/11/25 コードの不具合を修正。

基礎&応用力をしっかり育成!Androidアプリ開発の教科書 Kotlin対応 なんちゃって開発者にならないための実践ハンズオン (CodeZine BOOKS)

新品価格
¥3,135から
(2019/11/13 14:00時点)

【Monaca】Onsen UIのアイコンをさらに太く表示する
Tagged on: