Как заменить иконки Font Awesome на другие иконки в dle?
В меню хочу заменить иконки 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> |
<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"> |
<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"> |
.nav__menu > li > a .fal {opacity: 0.6; position: relative; top: -2px;} lang="css">
Сайт: https://workerspot.ru/
Дополнительно:
Проблема решилась добвлением строки в CSS:.nav__menu > li > a > img {margin-right: 10px;}
Ответы:
так добавьте для ваших svg-иконок аналог
.icon-at-left [class*="fa-"], .icon-left .icon { margin-right: 0.5em; } |
.icon-at-left [class*="fa-"], .icon-left .icon { margin-right: 0.5em; }
из https://workerspot.ru/templates/Worker/css/common.css
- Добавил в CSS:
.nav__menu > li > a.icon-at-left [class*="fa-"], .icon-left .icon {margin-right: 0.5em;}
.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>
<span class="icon-at-left"img src="/uploads/icons/design.svg" alt="Дизайн"width="20" height="20"></span>Дизайн</a></li>
Не работает!
- Oberon2005, и не будет, сейчас у вас не картинка а непойми что, я подразумевал присвоение svg-иконке какого-то класса и добавление чего-то типа .icon-at-left .icon-img в перечень селекторов
Опишите проблему, и специалист поможет с настройкой, исправлением ошибки или доработкой сайта. Подберём понятный план работ без лишней переписки.
Пока нет других ответов. Будьте первым, кто поможет автору.
Ответить на вопрос
Для замены иконок Font Awesome на другие иконки в DLE (DataLife Engine) необходимо выполнить следующие шаги:
1. Найдите иконки, которые вы хотите использовать вместо иконок Font Awesome. Скачайте их на свой компьютер.
2. Загрузите новые иконки на свой сервер в папку с шаблоном вашего сайта. Обычно эта папка называется "templates" и находится в корневой директории сайта.
3. Откройте файл шаблона, в котором используются иконки Font Awesome. Обычно это файл "main.tpl" или "header.tpl". Найдите строки кода, где используются иконки Font Awesome.
4. Замените код иконок Font Awesome на код новых иконок. Например, если вы используете иконку с классом "fa fa-home", замените ее на код новой иконки.
5. Сохраните изменения и обновите страницу вашего сайта, чтобы убедиться, что новые иконки отображаются корректно.
Пример замены иконки Font Awesome на другую иконку в DLE:
<i class="fa fa-home"></i> <!-- Заменяем на новую иконку -->
Следуя этим шагам, вы сможете легко заменить иконки Font Awesome на другие иконки в DLE и настроить внешний вид вашего сайта по вашему вкусу.