Google arama sonuçlarını girilmesi sürelerine göre çoktan aza doğru sıralar.
Bu yüzden çıkmıyor olabilir.

Örnek:

<!-- head -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.2/css/all.min.css" integrity="sha512-HK5fgLBL+xu6dm/Ii3z4xhlSUyZgTT9tuc/hSrtw6uzJOvgRr2a9jyxxT1ely+B+xFAmJKVSTbpM/CuL7qxO8w==" crossorigin="anonymous" />

<!-- linkin bulunduğu yer -->
	<li><a href="#" class="asagi">Ürünler</a>
		<ul>
			<li><a href="#">Ürün Kategori 1</a></li>
			<li><a href="#">Ürün Kategori 2</a></li>
			<li><a href="#" class="sag">Ürün Kategori 3</a>
				<ul>
					<li><a href="#">Ürün 1</a></li>
					<li><a href="#" class="sag">Ürün 2</a>
						<ul>
							<li><a href="#">Ürün -2 -1</a></li>
						</ul>
					</li>
				</ul>
			</li>
		</ul>
	</li>	

.asagi::after {
    content: '\f063';
}
.sag::after {
    content: '\f061';
}

Mesela Bootstrap gibi open-source kaynaklar yapabilirsin. Sana şimdiden başarılar dilerim.

Merhaba

Bu örnek sana yardımcı olabilir:

HTML:

<div class="form-checkbox">
        <input type="checkbox" class="form-checkbox-input" id="check">
        <label for="check" class="form-checkbox-label">Default</label>
</div>

CSS:

.form-checkbox-input {
  display: none;
}

.form-checkbox-input + .form-checkbox-label:before {
  content: " ";
  width: 14px;
  height: 14px;
  border: 2px solid #c4c4c4;
  display: inline-flex;
  border-radius: 4px;
  background-size: 12px;
  background-position: center;
  transition: 0.2s;
  margin-right: 5px;
}

.form-checkbox-input:checked + .form-checkbox-label:before {
  background-color: red;
  border-color: red;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 10 7' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M8.2.5L3.5 5.2 1.8 3.5a.7.7 0 0 0-1 1L3 6.8c.3.3.7.3 1 0l5.3-5.3a.7.7 0 0 0-1-1z' fill='%23fff'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
}

Umarım yardımcı olabilmişimdir.