Как заменить иконки Font Awesome на другие иконки в dle?

Question

[Oberon2005]

В меню хочу заменить иконки Font Awesome на другие иконки.

<ul class="nav__menu d-flex flex-grow-1 icon-at-left js-this-in-mobile-menu">
					<li><a href="/design"><span class="fal fa-file-image-o"></span>Дизайн</a></li>
					<li class="submenu">
						<a href="#"><span class="fal fa-hourglass-half"></span>Аренда</a>
						<ul class="nav__menu-hidden nav__menu-hidden--single">
							<li><a href="#">Россия</a></li>
							<li><a href="#">Мир</a></li>
							<li><a href="#">Экономика</a></li>
							<li><a href="#">Наука и техника</a></li>
							<li><a href="#">Культура</a></li>
							<li><a href="#">Спорт</a></li>
						</ul>
					</li>
					<li><a href="#"><span class="fal fa-building"></span>Новостройки</a></li>
					<li><a href="#"><span class="fal fa-globe"></span>За рубежом</a></li>
					<li><a href="#"><span class="fal fa-chart-bar"></span>Аналитика</a></li>
					<li><a href="#"><span class="fal fa-file-alt"></span>Статьи</a></li>
					<li><a href="#"><span class="fal fa-bullhorn"></span>События</a></li>

Вместо <span class="fal fa-file-image-o"> вставил

<img src="/uploads/icons/design.svg" alt="Дизайн"width="20" height="20">

И вроде все хорошо, сработало. Но пропал пробел между иконкой и текстом меню. Как это можно поправить?
Сам CSS для Font Awesome:

.nav__menu > li > a .fal {opacity: 0.6; position: relative; top: -2px;} lang="css">

Сайт: https://workerspot.ru/

Answer 1

[Oberon2005]

Проблема решилась добвлением строки в CSS:.nav__menu > li > a > img {margin-right: 10px;}

Answer 2

[IvanU7n]

так добавьте для ваших svg-иконок аналог

.icon-at-left [class*="fa-"], .icon-left .icon {
    margin-right: 0.5em;
}

из https://workerspot.ru/templates/Worker/css/common.css

Comments

[Oberon2005]

Добавил в CSS:

.nav__menu > li > a.icon-at-left [class*="fa-"], .icon-left .icon {margin-right: 0.5em;}

В шаблон:

<span class="icon-at-left"img src="/uploads/icons/design.svg" alt="Дизайн"width="20" height="20"></span>Дизайн</a></li>

Не работает!

[IvanU7n]

Oberon2005, и не будет, сейчас у вас не картинка а непойми что, я подразумевал присвоение svg-иконке какого-то класса и добавление чего-то типа .icon-at-left .icon-img в перечень селекторов