Use Font Icons as links within Content Template

This thread is resolved. Here is a description of the problem and solution.

Problem:

I'm trying to use Font Icons as links within a Content Template:

https://toolset.com/forums/topic/use-font-icons-as-links-within-content-template/#post-1210295

Solution:

It needs some custom codes, see details here:

https://toolset.com/forums/topic/use-font-icons-as-links-within-content-template/#post-1210428

Relevant Documentation:

This support ticket is created 5 years, 8 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.

No supporters are available to work today on Toolset forum. Feel free to create tickets and we will handle it as soon as we are online. Thank you for your understanding.

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/Hong_Kong (GMT+08:00)

Tagged: Content Templates, Views plugin

This topic contains 3 replies, has 2 voices.

Last updated by peterD-11 5 years, 8 months ago.

Assisted by: Luo Yang.

Author

Posts

March 5, 2019 at 10:42 pm #1210295

peterD-11

Tell us what you are trying to do?
I'm trying to use Font Icons as links within a Content Template

I have currently:
[wpv-conditional if="( NOT(empty($(wpcf-website))) )"]Website[/wpv-conditional]

I would like to swap the text link Website for a font icon - I don't really mind which family - font awesome etc.

I tried using an SVG from the simple-social-icons plugin installed on my site but I guess ToolTypes Content Template does not like SVGs ?

[wpv-conditional if="( NOT(empty($(wpcf-facebook))) )"]<li class="ssi-facebook">[/wpv-conditional]

What method do you recommend?

Thanks

What is the link to your site?
hidden link

March 6, 2019 at 8:50 am #1210428

Luo Yang

Hello,

I assume we are talking about these:
1) Plugin "Simple Social Icons" download from:
https://wordpress.org/plugins/simple-social-icons/
2) a custom URL field "facebook" created with Types plugin.

I just test your codes in my localhost in a fresh wordpress installation + the latest version of Toolset plugins:

[wpv-conditional if="( NOT(empty($(wpcf-facebook))) )"]<li class="ssi-facebook"><a href="[types field='facebook' output="raw"][/types]" target="_blank" rel="noopener noreferrer"><svg role="img" class="social-facebook" aria-labelledby="social-facebook"><use xlink:href="<em><u>hidden link</u></em>"></use></svg></a>[/wpv-conditional]

It works fine in my Chrome browser, and I do see the facebook icon wrapped in a link, see screenshot: facebook-link.JPG

I suggest you check these:
1) Makes sure you are using the correct symbol-defs.svg link in your codes, you can put it into the post content directly, check if it works.

2) In case it is a compatibility problem, please deactivate other plugins, and switch to wordpress default theme 2019, and test again

March 6, 2019 at 11:03 am #1210514

peterD-11

Thank you Luo for your fast response.

Your solution didn't work for me - perhaps as you suggest because of a plugin or theme conflict.

I did get it work coding the path to the SVG.7

[wpv-conditional if="( NOT(empty($(wpcf-facebook))) )"][/wpv-conditional]

March 6, 2019 at 11:04 am #1210516

peterD-11

My issue is resolved now. Thank you!