Skip Navigation

[Resolved] Include font awesome icon as "text" in file link

This support ticket is created 5 years, 3 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
- - 14:00 – 20:00 14:00 – 20:00 14:00 – 20:00 14:00 – 20:00 14:00 – 20:00
- - - - - - -

Supporter timezone: Asia/Ho_Chi_Minh (GMT+07:00)

This topic contains 3 replies, has 2 voices.

Last updated by briana-5 5 years, 3 months ago.

Assisted by: Beda.

Author
Posts
#1318151

I'm trying to create a link to a file stored in a custom field. In the "File Link title" box when inserting the field short code I'm inserting the code for the font awesome icon that I want to serve as the "text" for the link. It works fine in terms of outputting the link and displaying the icon, but there are two extra characters at the end: >" . The extra characters do not appear if I just use text in the "file Link title" box, so it's related to using the font awesome code....What am I doing wrong?

<ul class="list-group">
	<li class="list-group-item d-flex p-1"> 
      <span class="mr-auto">[wpv-post-date]:  <strong>[types field="note"][/types] </strong>[types field='user-file' title='<i class="fa fa-file-archive-o" aria-hidden="true"></i>'][/types]</span>  
      <span class="pr-1"><a data-toggle="modal" href="#edit[wpv-post-id]"> <i class="fa fa-edit" aria-hidden="true"></i></a> </span> 
      <span class="pl-1">[cred_delete_post_link action='trash' text='<i class="fa fa-trash" aria-hidden="true"></i>' message='Are you sure you want to delete this note?' message_show='1' class='cred-refresh-after-delete']</span> 
      </li>
</ul>
#1318225

The problem here is Gutenberg seems to correct all single apostrophes to double in classic editors.

I am surprised this happens, but you can confirm it by adding some HTML with '' and "" to the classic block, and save + reload the editor.
It'll now show all '' converted to "".

This then forcedly breaks the ShortCode, because it thinks a new attribute comes when a "" appears, but in fact, it's just a Class or other HTML attribute.
Usually, you can solve that by using "" only for ShortCode attributes and '' for nested, but Gutenberg strips and corrects the syntax.

The only format that will work is this:

[types field="file" title="<i class='fas fa-camera'></i>"][/types]

But if you use Gutenberg, no matter in what block, the above single '' will convert to "" and break the output.
In this case, for now, you have to disable Gutenberg or use another approach to create a link to a file with an icon.
Disabling Gutenberg can be done for Custom Post types in Toolset > Post Types > Edit, or globally with this in your functions.php:

add_filter( 'use_block_editor_for_post_type', '__return_false' );

You can also paste the example I show above into a "ShortCode block".
That will work, but you need to follow that precise syntax and use only ShortCode Blocks, no other blocks if you use Gutenberg to insert such nested structures.

I will escalate the problem, but there is likely little we can do, since it happens with native Gutenberg, out of the box.

#1319765

Thank you! The format you provided worked for the way I'm currently using the shortcode.

#1319767

My issue is resolved now. Thank you!