Viewing 6 posts - 1 through 6 (of 6 total)
  • Author
    Posts
  • October 28, 2019 at 10:25 am #1151691
    famarinu

    Hi,
    In this case: https://kriesi.at/support/topic/how-to-add-icon-before-the-title-accordion/
    How do I add a different icon to each toggle?
    I tried inserting span id in “Toggle title” in this mode:
    <span id="test"> Test title</span>
    but it didn’t work.
    Suggestions?
    Thank you for your help,
    Manuela

    October 28, 2019 at 4:09 pm #1151798
    Nikko

    Hey Manuela,

    Since you already have this code:

    .family .toggler:before {
    content: "\f104";
    font-family: flaticon;
    position: relative;
    font-size: 28px !important;
}

    You can target the 2nd one like this:

    .family [data-fake-id="#toggle-id-2"] {
    content: "\f105";
}

    If you have a 3rd one just copy and past the css code, replace #toggle-id-2 with #toggle-id-3, and change the content value.
    Hope this helps.

    Best regards,
    Nikko

    October 28, 2019 at 9:20 pm #1151881
    famarinu

    Hi,
    I entered the suggested code, but entered it does not change. I clean also the cache, but nothing.
    All the code I entered for the accodiong is:
    /*add icon in accordion*/
    /* Custom Accordion Icon */
    .family .toggler:before {
    content: “\f104″;
    font-family: flaticon;
    position: relative;
    font-size: 28px !important;
    }

    .family .toggler:before {
    margin-right: 15px !important;
    }

    .family [data-fake-id=”#toggle-id-2”] {
    content: “\f105”;
    font-family: flaticon;
    }

    .family .activeTitle .toggler:before {
    content: “\f104”;
    font-family: flaticon;
    }

    .js_active .av-elegant-toggle .toggler {
    padding: 35px 60px 30px 15px;
    }

    Another suggestion?
    Thank you.

    October 30, 2019 at 8:47 am #1152237
    Nikko

    Hi famarinu,

    I apologize for my mistake in previous code I gave, this code:

    .family [data-fake-id="#toggle-id-2"]

    should be:

    .family [data-fake-id="#toggle-id-2"]:before

    I have fixed it in your Quick CSS.
    Let us know if you need further assistance.

    Best regards,
    Nikko

    October 30, 2019 at 3:38 pm #1152386
    famarinu

    oh yes, now it work well.
    Thank you.
    You can close the post.

    October 30, 2019 at 3:50 pm #1152392
    Nikko

    Hi famarinu,

    Glad that we could help :)
    Thanks for using Enfold and have a great day!

    Best regards,
    Nikko

  • Author
    Posts
Viewing 6 posts - 1 through 6 (of 6 total)
  • The topic ‘different icons’ is closed to new replies.