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, 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/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, 11 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!