Topic Resolution: Resolved
  • Closed
  • Graham Newell
    Spectator
    September 2, 2015 at 7:41 pm #20339

    Hi.

    Can I use text for the sliding bar at the top of the page instead of a down arrow? Or is there a way to replace this with other icons/symbols?

    Thanks

    Denzel Chia
    Moderator
    Posts: 2656
    September 2, 2015 at 9:05 pm #20346

    Hi,

    The css code can be found in style.css at line 10365,
    look for the following block of codes.

    .sb_toggle:after {
    font-size: 16px;
    font-family: IcoMoon!important;
    content: '\f107';
    -webkit-font-smoothing: antialiased;
    display: block;
    height: 40px;
    position: absolute;
    left: 15px;
    top: 3px;
    color: #FFFFFF;
    text-shadow: 0 1px 0 rgba(0, 0, 0, 0.4);
    }
    .sb_toggle.open:after {
    -webkit-font-smoothing: antialiased;
    content: "\f106";
    }

    Change the font family to fontawesome, for example.

    .sb_toggle:after {
    font-size: 16px;
    font-family: 'FontAwesome' !important;
    content:"\f017";
    -webkit-font-smoothing: antialiased;
    display: block;
    height: 40px;
    position: absolute;
    left: 15px;
    top: 3px;
    color: #FFFFFF;
    text-shadow: 0 1px 0 rgba(0, 0, 0, 0.4);
    }
    .sb_toggle.open:after {
    -webkit-font-smoothing: antialiased;
    content: "\f106";
    }

    Then using the following page as a guide
    http://fontawesome.bootstrapcheatsheets.com/
    Change the CSS Rule, content: '\f107'; to some other icon.
    For example content:"\f017"; which is a clock icon.

    There are two entries of content in the css code, one for opened state and one for closed state.

    Please contact us via our services page, if you require further assistance.
    https://theme4press.com/services/

    Thanks!