Add Icon with ACF link to single posts

Support
#1

Hello, I’m making my CPT single post display with child theme files.
Can you please tell me how to display a cornerstone icon linked with ACF input?

Posts are not built with Cornerstone, they are just ACF displayed with custom php templates (content, single, wp-single)
The fields are collecting links to social media unique to each post
I used Cornerstone Custom Icons plugin to add some SVG to Cornerstone icon library. Now I don’t know how to call them up in a post and attach the link.

thanks!

#2

Hi @3butterflies,

Thanks for reaching out.

You mean you wish to add a link with SVG icon? If yes then I don’t think you need the cornerstone library. Just add the URL of the icon. Example,

<a href="<?php echo get_field('url_field'); ?>"><img src="<?php echo get_field('icon_field'); ?>"></a>

Where the url_field is the name of the field where you wish to link it. Then the icon_field is the URL of your SVG file.

Hope this helps.

#3

Thanks but I’m not sure how that works. You have your icons here:
pro/framework/fonts/font-awesome
and they don’t really contain a URL to a single SVG icon. Are you saying I need to upload icons again separately?

#4

I found this works to get a small linked truck icon:

<a href="<?php echo $instagram; ?>"target="_blank">
            <i class="x-icon x-icon-truck" aria-hidden="true" data-x-icon="&#xf0d1;"></i>
 </a>

But I need icons for:
Open External link
Facebook
Instagram
Twitter
YouTube
Spotify

Is there a list for those? I had some picked out and uploaded via Cornerstone Custom Icons plugin
I’m also hoping to make this process easier on my future work?

#5

Hi,

The theme is using fontawesome, so you may refer to their cheatsheet below.

https://fontawesome.com/cheatsheet

You just need to change the class and data-x-icon with the icon’s unicode

For example, if you want to add address book icon. You can change the html code to this

<i class="x-icon x-address-book" aria-hidden="true" data-x-icon="&#xf2b9;"></i>

Hope this helps

#7

I got it to work, thanks so much!

#8

We are delighted to assist you with this.

Cheers!

#9

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.