Font Awesomeをバージョンアップしたらチェックボックスが消えた時の対処法
2914 ワード
問題
FontAwesomeのバージョンを4系から5系にあげる際、疑似要素に指定していたFontAwesomeのアイコンが表示されなくなってしまった。
解決方法
5系では-o
という接尾辞が使えなくなっているため別のアイコンを使用する
4系で使用していたCheckBox
'\f096'
(fa-square-o)
5系で仕様が変わってしまったためバージョンアップすると未チェックのボタン'\f096'
が表示されなくなる
そのため新しい'\f0c8'
を使う必要がある。
しかしそのままするだけだとデフォルトでSolid
になってしまうようで、未チェックでも塗りつぶしになりチェックしているのかどうかがわかりずらいものになる。
そのためfont-weightでnormal
と指定
&-checkbox {
.input+label::before,
input+label::before {
font-weight: normal;
content: '\f0c8';
}
.input.checked+label::before,
input:checked+label::before {
font-weight: bold;
content: '\f14a';
}
}
上の画像のようにわかりやすくなった。
Author And Source
この問題について(Font Awesomeをバージョンアップしたらチェックボックスが消えた時の対処法), 我々は、より多くの情報をここで見つけました https://qiita.com/reiya018/items/9c48673a3988081fe276著者帰属:元の著者の情報は、元のURLに含まれています。著作権は原作者に属する。
Content is automatically searched and collected through network algorithms . If there is a violation . Please contact us . We will adjust (correct author information ,or delete content ) as soon as possible .