-
AuthorPosts
-
April 14, 2016 at 3:33 am #613401
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 #613408Hey 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,
VinayApril 14, 2016 at 4:38 am #613419Thanks 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 #613435Hi!
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 belowhttps://jdsteinbach.com/wordpress/using-svgs-wordpress/
Best regards,
VinayApril 14, 2016 at 5:42 am #613463I’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 #613479Hey!
which icons do you need?
Please give us the icons so we can help you make it work.THanks a lot
Regards,
BasilisApril 14, 2016 at 7:26 am #613536http://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 #615199Was that helpful?
April 19, 2016 at 6:48 am #617129Hey!
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,
IsmaelApril 24, 2016 at 2:28 am #620730Thanks Ismael!
- This reply was modified 8 years, 8 months ago by crodragon.
April 24, 2016 at 12:03 pm #620775Hi!
Glad we could help!
Best regards,
VinayOctober 9, 2017 at 10:54 pm #862161Very 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 #862714Hi,
Yes, it’s possible to use different icons as long as you use the right css selectors to target those slides.
Best regards,
NikkoOctober 11, 2017 at 9:40 am #862789I 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 #863051As 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 #863115Hi!
Please continue here: https://kriesi.at/support/topic/horizontal-accordion-mods/
Regards,
Ismael -
AuthorPosts
- The topic ‘Replace accordion toggle with Entypo icon’ is closed to new replies.