иконки подпишитесь на наши обновления

[dimonxf]

Всем привет, в стандартной теме есть иконки всякиз соц сетей с надписью подпишитесь на наши обновления. Но нету некоторых других соц сетей допустим Вконтакте и еще парочку...подскажите как самому добавить кнопки своих соц сетей? Я понимаю что нужны будут картиинки, это ладно, я сделаю, а вот какой код вставлять и куда? Также хотелось бы что бы при наведении на иконку она меняла цвет, допустим у меня меняеться цвет на оранджевый, это задано темой я так понимаю. Вот в принципе вся задача...на вский случай скриншот. ЗАранее огромное, спасибо!)

[DarinSr]

Для иконок Вконтакте и т.д нужено добавить шрифт, в котором есть эти иконки, например, Fontello.
На странице шрифта смотрите код иконки и добавляете его на сайт.

[dimonxf]

Для иконок Вконтакте и т.д нужено добавить шрифт, в котором есть эти иконки, например, Fontello.
На странице шрифта смотрите код иконки и добавляете его на сайт.

привет, спасибо, я погуглил нашел этот сайт http://fontello.com/ выбрал нужные иконки, подскажи пожалуйста, что и куда вписывать? По подробнее пожалуйста) я в этом деле чайник, буду очень благодарен!

[Виталий]

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: "....."; /* код иконки из нового шрифта*/
}

[dimonxf]

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"; вписав туда то значение, которое написано для каждой иконки что у них на сайте, надеюсь кому нибудь поможет. Спасибо!