技術

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

投稿日:

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

試してみたこと

FontAwesomeをクラスで指定。

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

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

FontAwesomeをUnicodeで指定

 

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

 

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

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

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

-技術
-

執筆者:


comment

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

This site uses Akismet to reduce spam. Learn how your comment data is processed.

関連記事

no image

【ionic 1.2】Native Scrolling

どうも中田です。 2015/12/10にionicの1.2が出ました! http …

no image

【Angular6】Angularで子コンポーネントから親コンポーネントのメソッドを呼び出す

Angularでアプリを作っている時、子コンポーネントから親コンポーネントのメソ …

[Bitbucket] fatal: Could not read from remote repository.

どうも中田です こないだリモートリポジトリにPushできないんすけど〜という話を …

no image

wordpressでcommon.min.cssが勝手に読み込まれる

こんにちは wordpressで自作テンプレートを作っている時に、見た目が崩れた …

no image

【Rails5.2】bootstrap4を追加する

こんにちは 今回はRails5にbootstrap4を追加したいと思います。 使 …