昨日の夜。
railsで、::beforeでいれてるbackground-image: image-url(ほにゃほにゃ.svg)が表示されないのなんでや……
— ユーホ (@tnkyy) 2020年3月9日
もう眠いから明日にしよ……。ということで、今朝格闘していた。
結論
疑似要素の背景画像で表示させたい場合(ボタンの矢印アイコンとか)はこれでよい。
background-image: url("sample.png");
あらまし
まず前提として、Railsで背景画像を表示したいとき以下のSCSS・CSSでは表示されない。
background-image: url("sample.png");
この解決方法はググるとすぐ出てくる。
background-image: image-url("sample.png");
こう!!
Railsの構築なんかイチからやることないからすぐ忘れるけど。
これで画像のパスは試行錯誤する(webpackerとか使ってると入れる場所がかわるから)。
でも疑似要素の背景画像で使っている場合、これだと表示されない。
.button-icon::before { position: absolute; display: inline-block; width: 1em; height: 1em; background: image-url("arrow.png") no-repeat; background-size: contain; content: ""; }
ややこしいけど、image-urlじゃなくて普通にurlでいいっぽい。ちなみにこのCSSは適当に書いたので、これでアイコンが表示されるかはわからん。
まとめ
矢印アイコンくらいならFontAwesomeとかでだしたい。