技術

セレクトボックスに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

CSSで片方を固定、片方を可変のレイアウトを実装

こんばんは IE8・9ではdisplay: flex;が使えないがために片方を固 …

[正規表現]半角英数字&記号

どうも中田です。 今更ですが、正規表現の話。 正規表現でこんなパターンがほしい的 …

no image

【ionic】ナビゲーションバーがちらつく

どうも、中田です。 ionicでアプリを作っていて、なんかナビゲーションバーがち …

[Rails] モデルが初期化されてないとな(not initialized)

どうも中田です Railsで、modelの initialize に処理を追加す …

rails_logo

[Rails] Controllerで表示してるページのパスを判定したい

Controllerで表示してるページのパスを判定して、条件分岐したいと思います …