Viewing 16 posts - 1 through 16 (of 16 total)
  • Author
    Posts
  • April 14, 2016 at 3:33 am #613401
    crodragon

    Hi,

    I would like to replace the standard + CSS-generated icon for the accordion object with Entypo font arrows. I found a thread that talks about using a PNG image but I would actually like to use the font icon. I tried to do that in CSS but I can’t figure out the code for content: ‘\’ part of it.

    April 14, 2016 at 4:25 am #613408
    Vinay

    Hey crodragon!

    Please use a plugin like https://wordpress.org/plugins/svg-support/ upload your svg icon to media library like a image and link the icon to the according same like the png but with an svg extension.

    Best regards,
    Vinay

    April 14, 2016 at 4:38 am #613419
    crodragon

    Thanks Vinnie. I’m trying to avoid installing more plugins and using images. Are you saying that’s the best/easiest way?
    I would also the same Entypo font to replace the standard li bullets.

    April 14, 2016 at 5:06 am #613435
    Vinay

    Hi!

    Wordpress by default won’t support SVG so you need to add a function or use a plugin to upload svg and use them as images
    To perform it without the plugin please check the link below

    Allow SVG through WordPress Media Uploader

    https://jdsteinbach.com/wordpress/using-svgs-wordpress/

    Best regards,
    Vinay

    April 14, 2016 at 5:42 am #613463
    crodragon

    I’m not sure if I’m getting my point across.. I’m trying to accomplish this with an icon font, not an image (png or svg).
    The icon font included with Enfold has the icons I need – I just need to find the way to include them.

    Here’s an example of what I’m going for: http://codepen.io/tofanelli/pen/waadRY.

    April 14, 2016 at 6:04 am #613479
    Basilis

    Hey!

    which icons do you need?
    Please give us the icons so we can help you make it work.

    THanks a lot

    Regards,
    Basilis

    April 14, 2016 at 7:26 am #613536
    crodragon

    http://fontello.github.io/entypo/demo.html

    I need “icon-right-open-big” for the closed state and icon-down-open-big for the opened state.

    April 15, 2016 at 11:15 pm #615199
    crodragon

    Was that helpful?

    April 19, 2016 at 6:48 am #617129
    Ismael

    Hey!

    Add this in the Quick CSS field:

    .toggle_icon:before {
    content: '\E87D';
    font-family: 'entypo-fontello';
    font-size: 18px;
    font-weight: normal;
}

.activeTitle .toggle_icon:before {
    content: '\E87B';
}

.toggle_icon {
    border: 0;
}

.toggle_icon span {
    display: none;
}

    Best regards,
    Ismael

    April 24, 2016 at 2:28 am #620730
    crodragon

    Thanks Ismael!

    • This reply was modified 8 years, 7 months ago by crodragon.
    April 24, 2016 at 12:03 pm #620775
    Vinay

    Hi!

    Glad we could help!

    Best regards,
    Vinay

    October 9, 2017 at 10:54 pm #862161
    Vasilis

    Very helpful!
    I was looking the last couple something like this.
    It works for me as well, but can I ask if it is possilbe to use a different icon on each slide, e.g. facebook icon, twitter icon, youtube icon?
    It works on tabs, but I like the idea of open each slide sepeate.

    Thank you!

    October 11, 2017 at 5:14 am #862714
    Nikko

    Hi,

    Yes, it’s possible to use different icons as long as you use the right css selectors to target those slides.

    Best regards,
    Nikko

    October 11, 2017 at 9:40 am #862789
    Vasilis

    I found also this topic and used this code as well. So I combined your and the code for color. I gave a css name for the accordion ‘my-accordion’

    Could assist me with http://samolis.family/en/accordion/

    Thank you.

    October 11, 2017 at 10:57 pm #863051
    Vasilis

    As I am checkin on both desktop and mobile version the look is different.
    – Tabs appear vertically on mobile and horizontial on desktop
    – Accordion looks vertical on both desktop and laptop.
    My preferrrence would be
    – Have accordion horizontial – that they appear horizontial on desktop and vertical on mobile
    or
    – Have coloured tabs which would be clickable and expandable (do not know if this is possible)

    Tabs look very nice, but on the mobile if I open facebook tab the website expands too much. I am using the code to have as right side widgets on all my pages.

    Thank you!

    October 12, 2017 at 4:15 am #863115
    Ismael

    Hi!

    Please continue here: https://kriesi.at/support/topic/horizontal-accordion-mods/

    Regards,
    Ismael

  • Author
    Posts
Viewing 16 posts - 1 through 16 (of 16 total)
  • The topic ‘Replace accordion toggle with Entypo icon’ is closed to new replies.