[Resolved] replace font awesome with svg

[Author]

Posts

[Akhil]

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,

[Akhil]

waiting for 16hrs for reply .

[Waqar]

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

[Akhil]

Hi Waqar,

i am using this plugin for optimizations: hidden link

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

[Akhil]

" 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?

[Waqar]

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

[Akhil]

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 ,

[Waqar]

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

[Akhil]

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;" ]

[Akhil]

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. ..

[Waqar]

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

[Akhil]

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.

[Waqar]

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

[Akhil]

Thank you.
i'll revert shortly on this.

[Waqar]

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