Skip Navigation

[Resolved] replace font awesome with svg

This support ticket is created 4 years, 11 months ago. There's a good chance that you are reading advice that it now obsolete.

This is the technical support forum for Toolset - a suite of plugins for developing WordPress sites without writing PHP.

Everyone can read this forum, but only Toolset clients can post in it. Toolset support works 6 days per week, 19 hours per day.

Sun Mon Tue Wed Thu Fri Sat
- 9:00 – 13:00 9:00 – 13:00 9:00 – 13:00 9:00 – 13:00 9:00 – 13:00 -
- 14:00 – 18:00 14:00 – 18:00 14:00 – 18:00 14:00 – 18:00 14:00 – 18:00 -

Supporter timezone: Asia/Karachi (GMT+05:00)

Tagged: 

This topic contains 15 replies, has 2 voices.

Last updated by Akhil 4 years, 10 months ago.

Assisted by: Waqar.

Author
Posts
#1232319

Hi, i used to have font awesome based codes like this >

[wpv-for-each field="wpcf-why-list"]
<div> <i class="9691-check fa fa-check-circle" style="font-size:25px;color:#EF4B87;margin-right:1%">
[types field="why-list"][/types]</div>
[/wpv-for-each]

i now wanted to use svg icons.

the code :
[wpv-for-each field="wpcf-why-list"]
<div>
<svg class="iconpress-icon iconfinder_299110" viewBox="0 0 24 24" style="color:#525252; font-size:80px;" ><title>check sign</title><use href="#iconfinder_299110" xlink:href="#iconfinder_299110"></use></svg>
[types field="why-list"][/types]</div>
[/wpv-for-each]

ihave no idea why this is not working,

#1232663

waiting for 16hrs for reply .

#1232679

Waqar
Supporter

Languages: English (English )

Timezone: Asia/Karachi (GMT+05:00)

Hi Dee,

Thank you for contacting us and I'll be happy to assist.

We apologize for the delay, as we had an unusually busy queue.

Although this question doesn't specifically relate to Toolset plugins, I'll be happy to point in the right direction.

The code used for the SVG tag seems to be incorrect or incomplete since it neither provides the information about the shape to draw or an external file to load.

To learn about its proper usage, I'll recommend the following guides:

hidden link
hidden link
hidden link
hidden link

regards,
Waqar

#1232682

Hi Waqar,

i am using this plugin for optimizations: hidden link

you can try the lite version here :https://wordpress.org/plugins/iconpress-lite/

#1232683

" Although this question doesn't specifically relate to Toolset plugins, I'll be happy to point in the right direction. "

it does related to toolset incompatibilities. i can add the same code in WordPress editor and the output is fine. but not in toolset editor . Now. this is not toolset issue?

#1232687

Waqar
Supporter

Languages: English (English )

Timezone: Asia/Karachi (GMT+05:00)

Hi Dee,

Thank you for sharing these details.

I'll need admin access to see how the plugin and this code is being used. Can you please share the link to pages where it does and doesn't work, along with the temporary admin user's details?
( your next reply will be private )

I'll be in a better position to guide you accordingly.

regards,
Waqar

#1232689

Hi waqar, i couldn't provide now for some reason. could you try downloading the lite version and test in your test server ? will appreciate that . thank you ,

#1232695

Waqar
Supporter

Languages: English (English )

Timezone: Asia/Karachi (GMT+05:00)

Hi Dee,

I can perform some troubleshooting on my test website, but this will take some time.

I'll try to get back with an update as soon as possible.

Meanwhile, if you see any error/warning in the browser's console while viewing the page where icons are not working, please let me know.
( https://codex.wordpress.org/Using_Your_Browser_to_Diagnose_JavaScript_Errors )

Thank you for your patience.

regards,
Waqar

#1232712

let me check and revert asap. btw the test is being done here. hidden link
webfence is working on the site recent security issue

the svg code work perfectly :

<svg class="iconpress-icon iconfinder_299110" viewBox="0 0 24 24" style="color:#525252; font-size:20px;" ><title>check sign</title> <g transform="translate(0 -1028.4)"> <path d="m22 12c0 5.523-4.477 10-10 10-5.5228 0-10-4.477-10-10 0-5.5228 4.4772-10 10-10 5.523 0 10 4.4772 10 10z" fill="#27ae60" transform="translate(0 1029.4)"></path> <path d="m22 12c0 5.523-4.477 10-10 10-5.5228 0-10-4.477-10-10 0-5.5228 4.4772-10 10-10 5.523 0 10 4.4772 10 10z" fill="#2ecc71" transform="translate(0 1028.4)"></path> <path d="m16 1037.4-6 6-2.5-2.5-2.125 2.1 2.5 2.5 2 2 0.125 0.1 8.125-8.1-2.125-2.1z" fill="#27ae60"></path> <path d="m16 1036.4-6 6-2.5-2.5-2.125 2.1 2.5 2.5 2 2 0.125 0.1 8.125-8.1-2.125-2.1z" fill="#ecf0f1"></path> </g> </svg>

the concern is on the shortcode :[iconpress id="iconfinder_299110" title="check sign" style="color:#525252; font-size:20px;" ]

#1232719

this is the latest test,. the svg working but the toolset codes are not executed

[wpv-for-each field="wpcf-why-list"]
         <div> 
<svg class="iconpress-icon iconfinder_299110" viewBox="0 0 24 24" style="color:#525252; font-size:20px;" ><title>check sign</title> <g transform="translate(0 -1028.4)"> <path d="m22 12c0 5.523-4.477 10-10 10-5.5228 0-10-4.477-10-10 0-5.5228 4.4772-10 10-10 5.523 0 10 4.4772 10 10z" fill="#27ae60" transform="translate(0 1029.4)"></path> <path d="m22 12c0 5.523-4.477 10-10 10-5.5228 0-10-4.477-10-10 0-5.5228 4.4772-10 10-10 5.523 0 10 4.4772 10 10z" fill="#2ecc71" transform="translate(0 1028.4)"></path> <path d="m16 1037.4-6 6-2.5-2.5-2.125 2.1 2.5 2.5 2 2 0.125 0.1 8.125-8.1-2.125-2.1z" fill="#27ae60"></path> <path d="m16 1036.4-6 6-2.5-2.5-2.125 2.1 2.5 2.5 2 2 0.125 0.1 8.125-8.1-2.125-2.1z" fill="#ecf0f1"></path> </g> </svg>
           [types field="why-list"][/types]</div>
         [/wpv-for-each]

the [types field="why-list"][/types] is not executed. ..

#1233131

Waqar
Supporter

Languages: English (English )

Timezone: Asia/Karachi (GMT+05:00)

Hi Dee,

Thanks for sharing the update and glad the SVG icons are showing now.

I've tested the icon from the "IconPress Lite" plugin and a repeating custom field on my website and they both work fine together.

Here are some screenshots, to show how they were tested:

1. Custom field:
hidden link

2. Custom field's repeating values:
hidden link

3. The code used in the post's body, same as you shared:
hidden link


[wpv-for-each field="wpcf-why-list"]
<div>
<svg class="iconpress-icon iconfinder_299110" viewBox="0 0 24 24" style="color:#525252; font-size:20px;" ><title>check sign</title> <g transform="translate(0 -1028.4)"> <path d="m22 12c0 5.523-4.477 10-10 10-5.5228 0-10-4.477-10-10 0-5.5228 4.4772-10 10-10 5.523 0 10 4.4772 10 10z" fill="#27ae60" transform="translate(0 1029.4)"></path> <path d="m22 12c0 5.523-4.477 10-10 10-5.5228 0-10-4.477-10-10 0-5.5228 4.4772-10 10-10 5.523 0 10 4.4772 10 10z" fill="#2ecc71" transform="translate(0 1028.4)"></path> <path d="m16 1037.4-6 6-2.5-2.5-2.125 2.1 2.5 2.5 2 2 0.125 0.1 8.125-8.1-2.125-2.1z" fill="#27ae60"></path> <path d="m16 1036.4-6 6-2.5-2.5-2.125 2.1 2.5 2.5 2 2 0.125 0.1 8.125-8.1-2.125-2.1z" fill="#ecf0f1"></path> </g> </svg>
[types field="why-list"][/types]
</div>
[/wpv-for-each]

4. Output on the front-end:
hidden link

Please let me know if any of these steps are different from how you're using the field and the SVG icon.

regards,
Waqar

#1233368

hi waqar, thank you for the reply .

from https://toolset.com/forums/topic/replace-font-awesome-with-svg/#post-1232712,

i mention the issue is using the shortcode :

the concern is on the shortcode :[iconpress id="iconfinder_299110" title="check sign" style="color:#525252; font-size:20px;" ]

i guess you missed that.

#1233760

Waqar
Supporter

Languages: English (English )

Timezone: Asia/Karachi (GMT+05:00)

Hi Dee,

I'm sorry about the confusion, but your last message made me believe that only the Types field shortcode wasn't rendering.
( https://toolset.com/forums/topic/replace-font-awesome-with-svg/#post-1232719 )

I downloaded a default collection of icons from the plugin and used the shortcode "[iconpress ]" and it also worked in my tests:


[wpv-for-each field="wpcf-why-list"]
<div>
[iconpress id="local_121" title="Title" style="color:#525252; font-size:80px;"]
[types field="why-list"][/types]
</div>
[/wpv-for-each]

Screenshot: hidden link

Please make sure that the icon that you're trying to load through the shortcode has been downloaded in your website's collection and if the issue still persists, it would best to consult IconPress plugin's official support and documentation.

If it still turns out that issue is only experienced, when the Toolset plugins are active, I'll need access to a website where the issue can be seen for further troubleshooting.
( it doesn't have to be live/production website and you can create a temporary website, just to show the issue )

regards,
Waqar

#1234732

Thank you.
i'll revert shortly on this.

#1234898

Waqar
Supporter

Languages: English (English )

Timezone: Asia/Karachi (GMT+05:00)

Hi Dee,

Sure the ticket will be open and feel free to post related information or question in this thread,

You're welcome to open a new ticket for each new question or concern.

regards,
Waqar

This ticket is now closed. If you're a WPML client and need related help, please open a new support ticket.