ulタグ内の黒い点のみの消し方

Question

前提・実現したいこと

実現したいこと:ulタグ内の黒い点のみを消したい
前提:ローカル環境にて、wordpressのサイト構築を行っています。snsへのリンクをulタグを用いて作成している途中で、list-style: none;をulタグに指定すると、表示させたい画像も消えてしまいます。画像は、ulタグのクラスに対して、background: url();で指定しています。詳細はソースコードにてよろしくお願いいたします。

発生している問題・エラーメッセージ

list-style: none;を指定すると点だけでなく、backgrond: url();で指定した画像まで一緒に消える。

該当のソースコード

        <ul class='sns-navi'>
            <li class='facebook'>
                <a href='https://twitter.com/web98083571'></a>
            </li>
            <li class='facebook'>
                <a href='https://twitter.com/web98083571'></a>
            </li>
        </ul>

ul {
    list-style: none;
}
.sns-navi {
	display: flex;
}

.sns-navi li {
	background-size: contain !important;
	width: 30px;
	margin-right: 15px;
}

.sns-navi li a {
	width: 30px;
	height: 30px;
}

.sns-navi li:last-child {
	margin-right: 0px;
}

.sns-navi .twitter {
    background: url('./images/twitter-logo.png') no-repeat;
}

.facebook {
    background: url('./images/facebook-logo.png') no-repeat;
}

試したこと

サイト内にて右クリック検証で、ulタグに適用されているcssの確認。作成中のサイトと似たサイトにて、ulタグのcss確認。phpの<a></a>の間に文字を入れると、黒い点が消え文字の後ろに画像が重なる形で表示されることを確認。list-style-typeへの変更など。

補足情報（FW/ツールのバージョンなど）

Local by Flywheelの設定
Web Server: Apache
PHP Version: 8.0.0
Wordpress Version: 5.8.1

Answer 1

aが中身がからなので高さも幅もなくなっています

<a href='https://twitter.com/web98083571'>&nbsp</a>

のようになにかダミーでモノをいれておいてください

Comments

[heechan]

素早いご回答誠にありがとうございました！無事解決しました！！