Slider Revolution Responsive, как подключить svg стрелки?

Тема в разделе "Верстка", создана пользователем CHADREX, 25 янв 2015.

Информация :
Уважаемые пользователи, прежде чем ответить в теме или создать новую, внимательно ознакомьтесь с Правилами раздела и Правилами форума
Для быстрого поиска ответов на ваши вопросы воспользуйтесь Картой раздела и/или Поиском по разделу
Модераторы: ultra
  1. CHADREX

    CHADREX Психопат

    Регистр.:
    12 янв 2014
    Сообщения:
    530
    Симпатии:
    205
    Доброй ночи, мне нужна помощь. Мне понравилось оформление слайдера на одном сайте, собственно вот он: http://demo.alessioatzeni.com/klaus/

    По коду не трудно догадаться что отвечает за этот стиль.
    http://demo.alessioatzeni.com/klaus/wp-content/themes/klaus/style.css - раздел
    /* 6. Revolution Slider Setup Graphics

    Так вот, при попытке установить себе этот стиль, возникает одна проблема - не видно самих стрелок переключения. Так вот вопрос, как сделать так чтобы они были видны. Я не знаю куда там нужно вставить ссылку на .svg файл.
     
  2. Amazko

    Amazko Поднимаю Резонанс

    Moderator
    Регистр.:
    4 мар 2012
    Сообщения:
    738
    Симпатии:
    467
    font-family: 'Icons';
    .tp-leftarrow:before {
    content: "\e1c8";
    }

    .tp-rightarrow:before {
    content: "\e1cb";
    }

    вот ети куски отвечают за те стрелочки.

    а вот етим куском кода подключаеться шрифт icons
    PHP:
    @font-face {
        
    font-family'Icons';
        
    src:url('_include/css/fonts/Icons.eot');
        
    src:url('_include/css/fonts/Icons.eot?#iefix'format('embedded-opentype'),
            
    url('_include/css/fonts/Icons.woff'format('woff'),
            
    url('_include/css/fonts/Icons.ttf'format('truetype'),
            
    url('_include/css/fonts/Icons.svg#Icons'format('svg');
        
    font-weightnormal;
        
    font-stylenormal;
    }

    /* Use the following CSS code if you want to use data attributes for inserting your icons */
    [data-icon]:before {
        
    font-family'Icons';
        
    contentattr(data-icon);
        
    speaknone;
        
    font-weightnormal;
        
    font-variantnormal;
        
    text-transformnone;
        
    line-height1;
        -
    webkit-font-smoothingantialiased;
    }

    [class^=
    "font-"]:before, [class*=" font-"]:before {
        
    font-family'Icons';
        
    speaknone;
        
    font-stylenormal;
        
    font-weightnormal;
        
    font-variantnormal;
        
    text-transformnone;
        -
    webkit-font-smoothingantialiased;
    }
    и там внятно написано где есть етот шрифт
     
  3. CHADREX

    CHADREX Психопат

    Регистр.:
    12 янв 2014
    Сообщения:
    530
    Симпатии:
    205
    Вот что у меня стоит:

    PHP:
    @font-face {
        
    font-family'linecons';
        
    src:url('/wp_content/plugins/js_composer/assets/css/lib/vc-linecons/fonts/vc_linecons.eot');
            
    url('/wp_content/plugins/js_composer/assets/css/lib/vc-linecons/fonts/vc_linecons.woff'format('woff'),
            
    url('/wp_content/plugins/js_composer/assets/css/lib/vc-linecons/fonts/vc_linecons.ttf'format('truetype'),
            
    url('/wp_content/plugins/js_composer/assets/css/lib/vc-linecons/fonts/vc_linecons.svg#Icons'format('svg');
        
    font-weightnormal;
        
    font-stylenormal;
    }

    /* Use the following CSS code if you want to use data attributes for inserting your icons */
    [data-icon]:before {
        
    font-family'Icons';
        
    contentattr(data-icon);
        
    speaknone;
        
    font-weightnormal;
        
    font-variantnormal;
        
    text-transformnone;
        
    line-height1;
        -
    webkit-font-smoothingantialiased;
    }

    [class^=
    "font-"]:before, [class*=" font-"]:before {
        
    font-family'Icons';
        
    speaknone;
        
    font-stylenormal;
        
    font-weightnormal;
        
    font-variantnormal;
        
    text-transformnone;
        -
    webkit-font-smoothingantialiased;
    }

    /*-----------------------------------------------------------------------------------*/
    /*    Revolution Slider Setup Graphics
    /*-----------------------------------------------------------------------------------*/

    .main-content .container-fluid .revolution_slider_container {
        
    margin-right: -15px;
        
    margin-left: -15px;
    }

    .
    fullwidthbanner ul li {
        list-
    stylenone;
    }

    .
    rev_slider_wrapper:hover .tparrows {
        
    opacity0.3;
        
    filteralpha(opacity=30);
    }

    .
    tp-bullets.simplebullets.round .bullet {
        
    margin-top0;
        
    margin-left20px;
        
    width11px;
        
    height11px;
        
    background-color#FFFFFF;
        
    background-imagenone;
        -
    webkit-transformrotate(45deg);
        -
    moz-transformrotate(45deg);
        -
    ms-transformrotate(45deg);
        -
    o-transformrotate(45deg);
        
    transformrotate(45deg);
        -
    webkit-transitionbackground 0.15s ease-in-out 0s;
        -
    moz-transitionbackground 0.15s ease-in-out 0s;
        -
    o-transitionbackground 0.15s ease-in-out 0s;
        
    transitionbackground 0.15s ease-in-out 0s;
    }

    .
    tp-bullets.simplebullets.round .bullet.first {
        
    margin-left!important;
    }
    .
    tp-bullets.simplebullets.round .bullet.last {
        
    margin-right!important;
    }

    .
    tp-bullets.simplebullets.round .bullet:hover,
    .
    tp-bullets.simplebullets.round .bullet.selected,
    .
    tp-bullets.simplebullets.navbar .bullet:hover,
    .
    tp-bullets.simplebullets.navbar .bullet.selected {
        
    background-color#F05253;
    }

    .
    tparrows:before {
        
    displayinline-block;
        
    margin-top0;
        
    margin-right0;
        
    width48px;
        
    text-aligncenter;
        
    text-decorationinherit;
        
    font-weightnormal;
        
    font-stylenormal;
        
    font-size16px;
        
    font-family'Icons';
    }

    .
    tparrows:before {
        
    margin-top23px;
    }

    .
    tp-leftarrow.default {
        
    positionrelative;
        
    top50% !important;
        
    z-index100;
        
    width48px;
        
    height68px;
        -
    webkit-border-radius0 3px 3px 0;
        -
    moz-border-radius0 3px 3px 0;
        
    border-radius0 3px 3px 0;
        
    background-color#171717;
        
    background-imagenone;
        
    color#FFFFFF;
        
    cursorpointer;
    }

    .
    tp-rightarrow.default {
        
    positionrelative;
        
    top50% !important;
        
    z-index100;
        
    width48px;
        
    height68px;
        -
    webkit-border-radius3px 0 0 3px;
        -
    moz-border-radius3px 0 0 3px;
        
    border-radius3px 0 0 3px;
        
    background-color#171717;
        
    background-imagenone;
        
    color#FFFFFF;
        
    cursorpointer;
    }

    .
    tparrows {
        
    positionrelative;
        
    top50% !important;
        
    z-index100;
        
    width48px;
        
    height68px;
        -
    webkit-border-radius2px;
        -
    moz-border-radius2px;
        
    border-radius2px;
        
    background-color#171717;
        
    background-imagenone;
        
    color#FFFFFF;
        
    cursorpointer;
        
    opacity0.3;
        
    filteralpha(opacity=30);
        -
    webkit-transitionopacity 0.15s ease-in-out 0s;
        -
    moz-transitionopacity 0.15s ease-in-out 0s;
        -
    o-transitionopacity 0.15s ease-in-out 0s;
        
    transitionopacity 0.15s ease-in-out 0s;
    }

    .
    tp-leftarrow:before {
        
    content"\e6e8";
    }

    .
    tp-rightarrow:before {
        
    content"\e6e9";
    }

    .
    tparrows:hover {
        
    opacity0.8 !important;
        
    filteralpha(opacity=80) !important;
    }

    .
    tp-caption.very_big_custom_text {
        
    positionabsolute;
        
    color#FFFFFF;
        
    text-shadownone;
        
    font-weight400;
        
    font-size48px;
        
    line-height1.3em;
        
    margin0px;
        
    border-width0px;
        
    border-stylenone;
        
    white-space:nowrap;
    }

    .
    tp-bannertimer {
        
    z-index20;  
    }

    .
    tp-caption.fullscreenvideo iframe {
        
    bordernone;  
    }
     
    Последнее редактирование: 25 янв 2015
  4. Amazko

    Amazko Поднимаю Резонанс

    Moderator
    Регистр.:
    4 мар 2012
    Сообщения:
    738
    Симпатии:
    467
    а ты различаешь два разных слова?
    у тебя шрифт стоит vc_linecons а везде в font-family прописан просто icons.
    как оно тебе найдет тот шрифт которого вообще нет, просто смени в font-family на нормальную назву.
     
  5. CHADREX

    CHADREX Психопат

    Регистр.:
    12 янв 2014
    Сообщения:
    530
    Симпатии:
    205
    Похоже я тупанул конкретно. Спасибо за наводку. Я еще про другое хотел спросить. Почему путь к файлу прописан не полностью.

    Там было так _include/...
    А парка в WordPress именуется обычно /wp_include/ в чем прикол?
     
  6. Amazko

    Amazko Поднимаю Резонанс

    Moderator
    Регистр.:
    4 мар 2012
    Сообщения:
    738
    Симпатии:
    467
    да потомучто на том сайте на котором демо именно оттуда береться шрифт, и никто не запрещал то что находитсья в демо может отличаться того что в архиве, главное что работает.
    либо у вас слайдер прямиком с сайта демо вытянут? глупый вопрос.
     
  7. Amazko

    Amazko Поднимаю Резонанс

    Moderator
    Регистр.:
    4 мар 2012
    Сообщения:
    738
    Симпатии:
    467
    дайте демо своего сайта на котором установлен етот слайдер и я тогда покажу почему такой путь.
     
  8. CHADREX

    CHADREX Психопат

    Регистр.:
    12 янв 2014
    Сообщения:
    530
    Симпатии:
    205
    Да на локалке он. Ну а вообще я в тупике пробовал прямые ссылки со своего сайта и чужого а результата ноль.
     
  9. Amazko

    Amazko Поднимаю Резонанс

    Moderator
    Регистр.:
    4 мар 2012
    Сообщения:
    738
    Симпатии:
    467
    я вам покажу скрин, а вы както решайте и внимательно смотрите.
    Screenshot_7.png
    вы подключаете один шрифт а используете совсем иной.
     
  10. CHADREX

    CHADREX Психопат

    Регистр.:
    12 янв 2014
    Сообщения:
    530
    Симпатии:
    205
    Та я это уже давно изменил. Не в этом проблема даже. Да и шрифт подключен уже, хоть и в другом месте.