Font Awesome5に変えたらグローバルナビ下に1pxほどの変な線が入ってしまった時の対処法
少し限定的ですが書いていきます。
Luxeritas3.1.0アップデートに伴い前回アップデートから導入されたFont Awesome5への切り替えも行なってみました。
このFont Awesomeの切り替えも大変だったのでまた記事にしてみることとしますが、今回はそんな中で特に気になったことを。
グローバルナビに変な線？
とりあえず見ていただいたほうが早いです。
当ブログの矢印部分。これだけだと分かりづらいのでパチンコブログのものも。
こっちだとハッキリ黒い線が1pxほど入ってるのがわかります。
これはナビ背景色が切れてナビバー背景色がひょっこり出てきている感じなんかな、と思います。
さて、問題です。
上記画像のアイコンで線が入っちゃってるやつと正常なやつの違いは何でしょうか？
…
…そうだね、「font-weight」だね。
対策
とりあえず全部solidファイルの仕様に合わせて、font-weightを「900」に再設定してみました。
直ったけど…う～ん。
白抜きの方を気に入って設定したのに不具合で使えなくなるとは痛い。
これは逃げでしか無いので、もうちょい頑張ってみることにしましたｗ
原因として考えられるのは…
太字と細字、極端に分かれている仕様なのでもしかしたらサイズそのものが変わってしまうものかもしれません。
＜span＞タグが一列に並んでいるグローバルナビ内においてサイズの違うものを置いてしまうということが今回の表示不具合の原因では無いのか、と考えました。
＜span＞に書かれている表示領域が一定になれば何とかなるんでしょう（適当）
対策その2
こうしました。
/*category*/
fa.menu1::before {
content:"\f07c";
font-weight:400;
font-size:15px!important;
}
/*contact*/
fa.menu3::before {
content:"\f2b6";
font-weight:400;
font-size:15px!important;
}グローバルナビ全体では文字サイズを14pxとしているので1px上げてみました。
おぉッ…！
MissionComplete！
(￣ー￣)ﾆﾔﾘ