1
Изменение И Редактирование Социальных Иконок
Автор Stas_Y, 19 июля 2015 20:55
Сообщений в теме: 10
#1
Отправлено 19 Июль 2015 - 20:55
Подскажите, как привязать к социальным иконкам свои ссылки? Как заменить значки иконок на свои?
#2
Отправлено 20 Июль 2015 - 11:05
Stas_Y (19 Июль 2015 - 20:55) писал:
Подскажите, как привязать к социальным иконкам свои ссылки? Как заменить значки иконок на свои?
Здравствуйте.
Чтобы привязать вам ссылки на социальные иконки к соответствующим значкам на вашем сайте - вам нужно найти следующий код, в бэк-офисе вашего интернет-магазина, в разделе Сайт -> Редактор шаблонов, в шаблоне html :
<!-- END: Logo --> <div class="header-right col-xs-8"> <div class="header-right-inner"> <ul class="connect-us"> <li><a href="#" class="fa fa-facebook"></a></li> <li><a href="#" class="fa fa-twitter"></a></li> <li><a href="#" class="fa fa-youtube"></a></li> <li><a href="#" class="fa fa-vk"></a></li> </ul> <form id="search_mini_form" action="http://{NET_DOMAIN}/search" method="get"> <div class="form-search"> <input id="search" type="text" name="q" value="" class="inputText search-string" placeholder="Поиск по магазину..."> <button type="submit" title="Искать" class="button search-submit"></button> </div> </form> </div> </div> </div> </div> </div> <!-- /END Основная часть Шапки -->
И заменить в нём данные символы # на ссылки к нужным вам страницам социальных сетей.
Проверьте, пожалуйста.
#3
Отправлено 20 Июль 2015 - 11:52
А как поменять сами иконки (картинки) на свои?
#4
Отправлено 21 Июль 2015 - 02:32
Блок:
замените на:
<ul class="connect-us"> <li><a href="#" class="fa fa-facebook"></a></li> <li><a href="#" class="fa fa-twitter"></a></li> <li><a href="#" class="fa fa-youtube"></a></li> <li><a href="#" class="fa fa-vk"></a></li> </ul>
замените на:
<ul class="connect-us"> <li><a href="#" class="fa"><img src="ссылка на иконку" alt="" /></a></li> <li><a href="#" class="fa"><img src="ссылка на иконку" alt="" /></a></li> <li><a href="#" class="fa"><img src="ссылка на иконку" alt="" /></a></li> <li><a href="#" class="fa"><img src="ссылка на иконку" alt="" /></a></li> </ul>
#5
Отправлено 21 Июль 2015 - 18:38
Подскажите а как добавить инстаграмм?
#6
Отправлено 21 Июль 2015 - 19:33
Stas_Y (21 Июль 2015 - 18:38) писал:
Подскажите а как добавить инстаграмм?
<li><a href="#" class="fa fa-facebook"></a></li> <li><a href="#" class="fa fa-twitter"></a></li> <li><a href="#" class="fa fa-youtube"></a></li> <li><a href="#" class="fa fa-vk"></a></li>и замените на
<li><a href="#" class="fa fa-facebook"></a></li> <li><a href="#" class="fa fa-twitter"></a></li> <li><a href="#" class="fa fa-youtube"></a></li> <li><a href="#" class="fa fa-vk"></a></li> <li><a href="#" class="fa fa-instagram"></a></li>В main.css найдите код
.fa-facebook:before {content: "\f09";} .fa-twitter:before {content: "\f099";} .fa-youtube:before {content: "\f167";} .fa-vk:before {content: "\f189";}и замените на
.fa-facebook:before {content: "\f09";} .fa-twitter:before {content: "\f099";} .fa-youtube:before {content: "\f167";} .fa-vk:before {content: "\f189";} .fa-instagram {content: "\f16d";}Так же найдите
#header .header-right .header-right-inner .connect-us li a.fa-vk:hover {border-color: #537599;color: #537599;}и замените на
#header .header-right .header-right-inner .connect-us li a.fa-vk:hover {border-color: #537599;color: #537599;} #header .header-right .header-right-inner .connect-us li a.fa-instagram:hover {border-color: Ваш цвет;color: Ваш цвет;}
#8
Отправлено 22 Июль 2015 - 04:22
В main.css найдите:
#header .header-right .header-right-inner .connect-us li a { border: 1px solid #dfdfdf; border-radius: 100%; color: #c9c9c9; display: inline-block; font-size: 20px; height: 40px; line-height: 40px; text-align: center; width: 40px; }замените на:
#header .header-right .header-right-inner .connect-us li a { border: 1px solid #dfdfdf; border-radius: 100%; color: #c9c9c9; display: inline-block; font-size: 20px; height: 40px; text-align: center; width: 40px; }
#9
Отправлено 06 Февраль 2017 - 05:01
Здравствуйте! Как изменить иконки соц сетей внизу сайта на совершенно другие значки? (App store, Play market, Visa и т.д.) Где их можно заменить и как загрузить? Спасибо!
Аккаунт SL 386608
Аккаунт SL 386608
#10
Отправлено 06 Февраль 2017 - 09:35
era-saitov.ru (06 Февраль 2017 - 05:01) писал:
Здравствуйте! Как изменить иконки соц сетей внизу сайта на совершенно другие значки? (App store, Play market, Visa и т.д.) Где их можно заменить и как загрузить? Спасибо!
Аккаунт SL 386608
Аккаунт SL 386608
Загрузите значки в разделе Сайт - Редактор шаблонов - Добавить файлы.
В шаблоне HTML удалим стандартные значки заменив:
<ul class="link-follow"> <li><a class="googleplay fa fa-facebook" href="#" title="Google Play"></a></li> <li><a class="appstore fa fa-twitter" href="#" title="App Store"></a></li> <li><a class="visa fa fa-odnoklassniki" href="#" title="Visa"></a></li> <li><a class="vk fa fa-vk" href="#" title="VK"></a></li> <li><a class="youtube fa fa-instagram" href="#" title="Instagram"></a></li> </ul>
на
<ul class="link-follow"> <li><a class="googleplay fa" href="#" title="Google Play"></a></li> <li><a class="appstore fa" href="#" title="App Store"></a></li> <li><a class="visa fa" href="#" title="Visa"></a></li> <li><a class="vk fa fa-vk" href="#" title="VK"></a></li> <li><a class="youtube fa fa-instagram" href="#" title="Instagram"></a></li> </ul>
В main.css укажем ссылки на иконки в блоке:
/*Иконки*/ .link-follow .googleplay {background: url(ссылка на иконку) no-repeat center; background-size: cover;} .link-follow .appstore {background: url(ссылка на иконку) no-repeat center; background-size: cover;} .link-follow .visa {background: url(ссылка на иконку) no-repeat center; background-size: cover;}
#11
Отправлено 07 Февраль 2017 - 07:13
Mr.Nito (06 Февраль 2017 - 09:35) писал:
Здравствуйте.
Загрузите значки в разделе Сайт - Редактор шаблонов - Добавить файлы.
В шаблоне HTML удалим стандартные значки заменив:
на
В main.css укажем ссылки на иконки в блоке:
Загрузите значки в разделе Сайт - Редактор шаблонов - Добавить файлы.
В шаблоне HTML удалим стандартные значки заменив:
<ul class="link-follow"> <li><a class="googleplay fa fa-facebook" href="#" title="Google Play"></a></li> <li><a class="appstore fa fa-twitter" href="#" title="App Store"></a></li> <li><a class="visa fa fa-odnoklassniki" href="#" title="Visa"></a></li> <li><a class="vk fa fa-vk" href="#" title="VK"></a></li> <li><a class="youtube fa fa-instagram" href="#" title="Instagram"></a></li> </ul>
на
<ul class="link-follow"> <li><a class="googleplay fa" href="#" title="Google Play"></a></li> <li><a class="appstore fa" href="#" title="App Store"></a></li> <li><a class="visa fa" href="#" title="Visa"></a></li> <li><a class="vk fa fa-vk" href="#" title="VK"></a></li> <li><a class="youtube fa fa-instagram" href="#" title="Instagram"></a></li> </ul>
В main.css укажем ссылки на иконки в блоке:
/*Иконки*/ .link-follow .googleplay {background: url(ссылка на иконку) no-repeat center; background-size: cover;} .link-follow .appstore {background: url(ссылка на иконку) no-repeat center; background-size: cover;} .link-follow .visa {background: url(ссылка на иконку) no-repeat center; background-size: cover;}
Количество пользователей, читающих эту тему: 0
0 пользователей, 0 гостей, 0 анонимных