技術

セレクトボックスに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 を使っています。コメントデータの処理方法の詳細はこちらをご覧ください

関連記事

go

【Golang】package strconvのintSize = 32 << (∧uint(0) >> 63)は何をしているのか

こんにちは Goのstrconvのパッケージを読んでたらintSizeというもの …

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

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

【Alexa Skill】ビックリするなかれ (Unsupported Directive)

どうも中田です。 みなさんAlexa使ってます?Alexaスキル作ってます? 今 …

no image

nginxにX-Robots-Tagを設定する

こんにちは 検索結果にページが表示されないようにするために metaタグには & …

no image

【Rails】helperからbrタグを含めた文字列を返したい時

こんにちは プライベートではもっぱらRailsを触っています。 触ってからそんな …