技術

セレクトボックスにfont-awesomeのアイコンを使うときは注意が必要。

投稿日:

セレクトボックスの中にfont-awesomeのアイコンを表示したい。
そんなときは注意です。
OSX / Linux / AndroidのSafari, Chrome, Firefoxでうまく表示されない問題が発生します。

試してみたこと

FontAwesomeをクラスで指定。

まずは何も考えずにこれでやってみました。

選択中も選択後もselectboxには何も表示されません。

FontAwesomeをUnicodeで指定

 

選択後に表示されるようになったので少しだけよくなりました。ただしプルダウンではアイコンがうまく表示されません。結局だめ。

 

調べてみたら、OSX / Linux / AndroidのSafari, Chrome, Firefoxでこの現象が起こるようです。javascriptで実装してねと。

今回はレーティングを星で五段階で設定したいというシンプルな内容だったので、環境依存ではない文字の星を使うことで回避しました。

Windowsで開発されている方は気づかずに不具合を仕込んでしまうことになるので、危ないですね。Macの方も思わぬところで時間がかかってしまうので要注意です。

-技術
-

執筆者:


comment

メールアドレスが公開されることはありません。 が付いている欄は必須項目です

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください

関連記事

no image

【Angular7】ファイルの指定をルート相対パスにする

こんにちは Angularで別ファイル(例えばcomponentからservic …

GooglePlayConsoleで「製品版として公開を開始」がグレーアウトして押せない!

こんにちは。田中です。 携わっていたアプリ開発案件ですが、ついに最初のリリースが …

【ionic】バックボタンの文字だけ消す

どうも中田です。 今回はHTML5ハイブリッド開発でお馴染みのionicについて …

Amazon Rekognitionを使うと写真に自動でタグを付けられます。

こんにちは、高石です。 来月20日(5月20日)はエンたまもくもく会#5です。 …

git_logo

[Git] どのコミットでバグが入ったか原因究明する方法【git blame】

こんにちは。さとうです。 今回はgitを使って、どのコミットでバグが入ったか原因 …