Автор Тема: иконки подпишитесь на наши обновления  (Прочитано 214 раз)

19 Сентября 2015, 23:43:33
  • Новичок
  • *
  • Сообщений: 38
  • Репутация: +0/-0
  • Сообщество PrestaShop
    • Просмотр профиля
Всем привет, в стандартной теме есть иконки всякиз соц сетей с надписью подпишитесь на наши обновления. Но нету некоторых других соц сетей допустим Вконтакте и еще парочку...подскажите как самому добавить кнопки своих соц сетей? Я понимаю что нужны будут картиинки, это ладно, я сделаю, а вот какой код вставлять и куда? Также хотелось бы что бы при наведении на иконку она меняла цвет, допустим у меня меняеться цвет на оранджевый, это задано темой я так понимаю. Вот в принципе вся задача...на вский случай скриншот. ЗАранее огромное, спасибо!)
20 Сентября 2015, 10:26:03
Ответ #1
  • Модератор
  • Ветеран
  • *****
  • Сообщений: 86048
  • Репутация: +25403/-0
  • Сообщество PrestaShop
    • Просмотр профиля
Для иконок Вконтакте и т.д нужено добавить шрифт, в котором есть эти иконки, например, Fontello.
На странице шрифта смотрите код иконки и добавляете его на сайт.
20 Сентября 2015, 19:12:37
Ответ #2
  • Новичок
  • *
  • Сообщений: 38
  • Репутация: +0/-0
  • Сообщество PrestaShop
    • Просмотр профиля
Для иконок Вконтакте и т.д нужено добавить шрифт, в котором есть эти иконки, например, Fontello.
На странице шрифта смотрите код иконки и добавляете его на сайт.
привет, спасибо, я погуглил нашел этот сайт http://fontello.com/ выбрал нужные иконки, подскажи пожалуйста, что и куда вписывать? По подробнее пожалуйста) я в этом деле чайник, буду очень благодарен! :)
21 Сентября 2015, 10:16:05
Ответ #3
  • Ветеран
  • *****
  • Сообщений: 105576
  • Репутация: +39546/-0
    • Просмотр профиля
    • Webstudio UwK
1. Подключаете новый шрифт в файле стилей /themes/ваша тема/css/global.css
@font-face {
    font-family: 'Наименование шрифта';
    src: url("../fonts/шрифт.eot");
    src: url("../fonts/шрифт.eot?#iefix&v=4.3.0") format("embedded-opentype"), url("../fonts/шрифт.woff2?v=4.3.0") format("woff2"), url("../fonts/шрифт.woff?v=4.3.0") format("woff"), url("../fonts/шрифт.ttf?v=4.3.0") format("truetype"), url("../fonts/шрифт.svg?v=4.3.0#fontawesomeregular") format("svg");
    font-weight: normal;
    font-style: normal;
}

2. Меняете стили для блока социальных иконок
.footer-container #footer #social_block ul li a:before {
    font-family: "Наименование шрифта";
}
.footer-container #footer #social_block ul li a:hover {
    color: #.....; /* цвет при наведении курсора */ 
}
.footer-container #footer #social_block ul li.facebook a:before {
    content: "....."; /* код иконки из нового шрифта*/
}
Cоздание интернет сайтов Webstudio UwK
21 Сентября 2015, 11:54:23
Ответ #4
  • Новичок
  • *
  • Сообщений: 38
  • Репутация: +0/-0
  • Сообщество PrestaShop
    • Просмотр профиля
1. Подключаете новый шрифт в файле стилей /themes/ваша тема/css/global.css
@font-face {
    font-family: 'Наименование шрифта';
    src: url("../fonts/шрифт.eot");
    src: url("../fonts/шрифт.eot?#iefix&v=4.3.0") format("embedded-opentype"), url("../fonts/шрифт.woff2?v=4.3.0") format("woff2"), url("../fonts/шрифт.woff?v=4.3.0") format("woff"), url("../fonts/шрифт.ttf?v=4.3.0") format("truetype"), url("../fonts/шрифт.svg?v=4.3.0#fontawesomeregular") format("svg");
    font-weight: normal;
    font-style: normal;
}

2. Меняете стили для блока социальных иконок
.footer-container #footer #social_block ul li a:before {
    font-family: "Наименование шрифта";
}
.footer-container #footer #social_block ul li a:hover {
    color: #.....; /* цвет при наведении курсора */ 
}
.footer-container #footer #social_block ul li.facebook a:before {
    content: "....."; /* код иконки из нового шрифта*/
}
сделал так как вы написали, у меня вместо иконок появились квадратики..точнее 4 квадратика, за место всех иконок, которые ссылались на одну и туже сылку.
Решение: я сделала по другому, ведь стандартный шрифт у престашопа в этом блоке - FontAwesomeб я зашел к ним на сайт в разделы иконки http://fontawesome.io./icons/ там выбрал иконку Вконтакте, хоть выбор не велик, всего одна иконка с этим логотипом была, но фиг с ним..затем в файле /themes/ваша тема/css/global.css я изменил .footer-container #footer #social_block ul li.rss a:before {
            content: "\f189"; }
а именно я изменил  content: "\f189"; вписав туда то значение, которое написано для каждой иконки что у них на сайте, надеюсь кому нибудь поможет. Спасибо! :)