Viewing 9 posts - 1 through 9 (of 9 total)
  • Author
    Posts
  • October 13, 2019 at 2:51 pm #1147581
    famarinu

    Hello,
    I added this code to add an icon before the title in the accordion, but instead of the icon it adds the text “uf101”
    See the image:
    https://monosnap.com/file/3QdcRKufwxWk1G0gAul0LLDN4Kjbom
    Added code:

    / * Custom Accordion Icon * /
./* Tab title style * /
.family .toggler {
     font-size: 24px;
     font-family: 'Kreon', serif;
     letter-spacing: .05em;
     font-weight: lighter;
     border-left: none;
     border-right: none;
}

/ * Accordion icon * /
.family .toggle_icon: before {
position: absolute;
font-size: 18px;
  top: 50%;
left: 0;
content: '\ uf101';
font-family: 'flaticon';
  line-height: 0;
}

/ * Active tab icon * /
.family .activeTitle .toggle_icon: before {
content: ì \ uf101 ';
font-family: 'flaticon';
}

/ * Hide default icon * /
.family .toggle_icon {
border: none;
}
.family .toggle_icon .vert_icon,
.family .toggle_icon .hor_icon {
display: none;
}

    Where is the error?

    October 13, 2019 at 8:40 pm #1147610
    famarinu

    HI,
    Always concern about this problem. how do I add an icon when the accordion is in “Elegant” style?
    I would like a title with an icon on the left, a title and a “+” on the right
    Thanks
    Manuela

    October 14, 2019 at 6:28 am #1147719
    Mike

    Hi,
    Thanks for the code sample, but there were quite a few errors in it, I tried to put this together for you but I’m still unsure what icons you want to use. Please see the screenshot in Private Content area.

    .family .toggle_icon:before {
  content: "\e816";
  font-family: entypo-fontello;
  position: relative; 
  font-size: 28px !important;
}
.family .toggle_icon {
  margin-top: -24px !important; 
}

.family .activeTitle .toggle_icon:before {
content: '\e806';
font-family: entypo-fontello;
}

    Please replace your current css with this and clear your browser cache, then let us know how to proceed.

    Best regards,
    Mike

    October 14, 2019 at 7:33 am #1147738
    famarinu

    ok i understood the problem, if i insert your code with icon:

    content: 'e806';
font-family: entypo-fontello

    it works.
    If I change the icon and insert this:

    content: 'uf101';
font-family: flaticon;

    Does not work.

    I would like to add to the title of the title in the “Elegant” style, and leave the “+/-” on the right.

    • This reply was modified 5 years, 1 month ago by famarinu.
    October 16, 2019 at 9:15 am #1148345
    Nikko

    Hi famarinu,

    Try using this:

    content: "\f101";
font-family: flaticon;

    Best regards,
    Nikko

    October 19, 2019 at 1:33 pm #1149490
    famarinu

    HI,
    yes this code works in Chrome, but in safari another icon appears. How is it possible?
    Chrome: https://monosnap.com/file/TwEQlbf4kPwj6aOAyN7rxjzKVvNU91
    Safari: https://monosnap.com/file/FIuuCsPvNBIQ9U020p8mRnK8JxwrFo
    another question, how do I put the icon to the left of the title? and leave +/- to the right of the title?
    Thank you for your support.

    October 19, 2019 at 11:11 pm #1149520
    Mike

    Hi,
    To add your custom font icon to the left of the title and keep the +/- icon to the right I adjusted your css in the Quick CSS to this:

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

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

    please clear your browser cache and check.
    I also checked your page on Mac with Safari and Chrome, and on Windows 10 in Chrome, Firefox, Edge & IE11 and the icon error in your screenshots doesn’t occur for me. Please try clearing your Safari browser cache.

    Best regards,
    Mike

    October 20, 2019 at 5:17 am #1149543
    famarinu

    Fantastic, thank you.

    October 20, 2019 at 2:47 pm #1149631
    Mike

    Hi,
    Glad we were able to help, we will close this now. Thank you for using Enfold.

    For your information, you can take a look at Enfold documentation here
    For any other questions or issues, feel free to start new threads in the Enfold forum and we will gladly try to help you :)

    Best regards,
    Mike

  • Author
    Posts
Viewing 9 posts - 1 through 9 (of 9 total)
  • The topic ‘how to add icon before the title accordion’ is closed to new replies.