前提・実現したいこと
ul li タグのドットをSVGのチェックボックス画像にしたいです。
発生している問題・エラーメッセージ
該当のソースコード
html
1<style> 2section ul { 3 list-style: none; 4} 5section ul li { 6 padding-left: 20px; 7 line-height: 1.6em; 8 background: url(../img/check.svg) left 0px top 3px no-repeat; 9 background-size: 15px auto; 10} 11</style> 12<section> 13 <h2>リストのアイコンに画像を使う</h2> 14 <ul> 15 <li>リストの<br>テスト1</li> 16 <li>リストの<br>テスト2</li> 17 <li>リストのテスト3</li> 18 <li>リストのテスト4</li> 19 </ul> 20</section>
Chrome developer tool のElements Styles です。
SVGファイルの中身です。
html:check.svg
1<svg aria-hidden="true" focusable="false" data-prefix="far" data-icon="check-square" class="svg-inline--fa fa-check-square fa-w-14" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><path fill="currentColor" d="M400 32H48C21.49 32 0 53.49 0 80v352c0 26.51 21.49 48 48 48h352c26.51 0 48-21.49 48-48V80c0-26.51-21.49-48-48-48zm0 400H48V80h352v352zm-35.864-241.724L191.547 361.48c-4.705 4.667-12.303 4.637-16.97-.068l-90.781-91.516c-4.667-4.705-4.637-12.303.069-16.971l22.719-22.536c4.705-4.667 12.303-4.637 16.97.069l59.792 60.277 141.352-140.216c4.705-4.667 12.303-4.637 16.97.068l22.536 22.718c4.667 4.706 4.637 12.304-.068 16.971z"></path></svg>
試したこと
backgraund-sizeを変更すればサイズが変わると思っていたのですが、
auto,containなど、
どうしても変わりませんでした。
下の画像は上記html単体テストを行ったときの画像です。
これに、何を足すと2行分の画像サイズになってしまうのでしょうか?
補足情報(FW/ツールのバージョンなど)
chrome Latest
vscode Latest
回答1件
あなたの回答
tips
プレビュー