Значки телефонов

Обсуждение и разработка шаблонов для Moguta.CMS
lvl 3
Аватара пользователя

Прогресс до следущего звания:
60%
Сообщения: 24
Зарегистрирован: 01 ноя 2016, 21:57
СообщениеДобавлено: 13 сен 2017, 16:42
Здравствуйте, помогите пожалуйста добавить значки телефона в шапку сайта. Я не разработчик, если не трудно объясните доступно как сделать что бы перед номером был значок телефона. Заранее спасибо .
Вложения
2017-09-13_17-37-20.png
2017-09-13_17-37-20.png (135.72 КБ) Просмотров: 72
Web-мастер
Аватара пользователя

Сообщения: 985
Зарегистрирован: 12 фев 2014, 21:57
Откуда: Екатеринбург- Краснодар
СообщениеДобавлено: 13 сен 2017, 20:59
Способов несколько, но все они требуют каких-то навыков и знаний. По картинке подсказать не получится, нужен адрес.
Cначала выберите иконку: https://www.flaticon.com/search?word=phone
lvl 3
Аватара пользователя

Прогресс до следущего звания:
60%
Сообщения: 24
Зарегистрирован: 01 ноя 2016, 21:57
СообщениеДобавлено: 14 сен 2017, 10:56
Yuricson писал(а):Способов несколько, но все они требуют каких-то навыков и знаний. По картинке подсказать не получится, нужен адрес.
Cначала выберите иконку: https://www.flaticon.com/search?word=phone

Здравствуйте, спасибо, что помогаете. Скачал иконки адрес ufateplomagia.ru
Web-мастер
Аватара пользователя

Сообщения: 985
Зарегистрирован: 12 фев 2014, 21:57
Откуда: Екатеринбург- Краснодар
СообщениеДобавлено: 14 сен 2017, 17:37
Надеюсь скачали в формате svg и разместили её в папке /images шаблона? Также необходимо знать её название))).
lvl 3
Аватара пользователя

Прогресс до следущего звания:
60%
Сообщения: 24
Зарегистрирован: 01 ноя 2016, 21:57
СообщениеДобавлено: 14 сен 2017, 18:13
Yuricson писал(а):Надеюсь скачали в формате svg и разместили её в папке /images шаблона? Также необходимо знать её название))).

Скачал, разместил. В старой теме в layout_contacts.php есть такой код :
<div class="mg-contacts-block">
Интернет-магазин "<?php echo MG::getSetting('shopName') ?>"
<br><?php echo MG::getSetting('shopAddress') ?>
<div class="phone mb">
<i class="contact-icon icon-phone"></i>
<a href="tel:+73472629316" class="contact-info" itemprop="telephone"><?php echo MG::getSetting('shopPhone') ?></a>
<?php if (class_exists('BackRing')): ?>
<?php else: ?>
<div style="height:6px;"> </div>
<?php endif; ?>
</div>
<div class="phone">
<i class="contact-icon icon-mobile"></i>
<a href="tel:+79378499316" class="contact-info" itemprop="telephone">+7(937)849-93-16</a>
</div>

</div>


Я вставил его в wood, НО

ЭТО НЕ ПОМОГЛО ))) зато стало две строчки контактов . я так понимаю названия файлов должны быть,- icon-phone и icon-mobile собственно я так их и обозвал. И такие файлы в папке images есть только они почему то png.
Ну вот как то так и правда, спасибо что помогаете)
Web-мастер
Аватара пользователя

Сообщения: 985
Зарегистрирован: 12 фев 2014, 21:57
Откуда: Екатеринбург- Краснодар
СообщениеДобавлено: 15 сен 2017, 08:15
Верните как было -смотрелось лучше))).
Формат svg имеет ряд преимуществ -нет потерь качества при изменении размера, можно выводить хоть 1х1 пикселей, хоть на всю страницу и при этом PageSpeed Insights ругаться не будет на такое изображение в отличии от png или jpg, где есть зависимость от размера исходного изображения. Так же можно менять цвет изображения. По этому принципу работает плагин: https://mogutashop.ru/plugins/alternativnaya-korzina
В Вашем случае можно вставить изображение прямо в верстку layout_contacts.php в пустые теги <i></i> так:

Код: Выделить всё
<i class="contact-icon icon-phone">
   <img src="<?php echo PATH_SITE_TEMPLATE ?>/images/icon-phone.svg" width="15" height="auto" />
</i>

Тоже самое и для второго телефона. Параметры: width-ширина в пикселях, а height-высота, браузер автоматически её вычислит исходя от ширины не нарушая пропорции изображения. Можно наоборот, зафиксировать высоту, а ширину делать "auto". Наверно это самый простой способ.
Не забудьте сбросить кеш))).
lvl 3
Аватара пользователя

Прогресс до следущего звания:
60%
Сообщения: 24
Зарегистрирован: 01 ноя 2016, 21:57
СообщениеДобавлено: 15 сен 2017, 08:43
Спасибо, всё получилось!

Вернуться в Шаблоны Moguta.CMS