Wordpress Question posted in
The official Wordpress documentation can be found here.

WordPress – Font-awesome and hyperlinks in tables

I’ve added the Font-Awesome plugin to my WordPress site.

The desired behaviour is to have a table where there is a column of links to home pages, represented by the FA "home" icon.

Each icon would be a link to the home page of the business in the row, with no additional text.

I have the plugin installed, so the house icon is generated by the [icon="house"] shortcode.

In the table, WP is parsing the hyperlink as text, not as a link, giving me this result:

enter image description here

The desired outcome is just the icon of the house, linking to https://example.com.

Can this be achieved with font-awesome icons and a URL link in a table in WordPress?

Tags:

2

Answers


  1. 0

    It is weird that the house’s HTML is rendered where as the link tags are escaped. Something escapes the text it echo. This makes html appear as text. Instead, enter the html directly:
    <a href="something"><span class="fa fa-home"></span></a>

    Or possibly : <a href="something"><i class="fa-solid fa-house"></i></a> depending on the version of Font Awesome that is used. You can view the source of page to get a hint.

    Or I think that the best is to use this code: <a href="something">[icon="house"]</a> if you can inject some HTML into the table.

    Login or Signup to reply.
  2. 0

    It seems that WordPress escape HTML code, but not shortcodes, as the [icon="house"] is rendered, so you could try the following custom shortcode instead (that embeds Font-awesome shortcode):

    add_shortcode( 'icon_link', 'icon_link_shortcode');
function icon_link_shortcode( $atts ) {
    extract( shortcode_atts( array(
        'icon'  => 'house',
        'url'   => '',
    ), $atts, 'icon_link' ) );

    return sprintf('<a href="%s">%s</a>', esc_url($url), do_shortcode("[icon='{$icon}']]"));
}

    Code goes in functions.php file of your child theme (or in a plugin).

    Then you will use the following shortcode: [icon_link url="https://example.com"]

    It could work.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search